Така имам си аз едно меню ето това:
Всичко е наред засега, но това меню за да бачка на моя сайт трябва да изглежда по друг начин. Да не е с ul и li тагове а с div, а аз нещо неуспях да го направя ако вие успеете печелите точка! Ето с това меню трябва да го интегрирам с това:
Така значи горното меню да стане на долното
, знам че е трудно и може да не ме разберете но питайте
.
Код:
ul#navmenu {
margin: 0px;
margin-left: 0px;
margin-top: 3px;
border: 0 none;
padding: 0;
width: 803px;
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul:after{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu ul li {
width: 160px;
float: left;
display: block !important;
display: inline;
}
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #fff;
border-left-color: #fff;
border-top-color: #fff;
border-bottom-color: #fff;
padding: 0 6px;
float: none !important;
float: left;
display: block;
background: #808080;
color: #fff;
font: 11px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #D5EAFF;
color: #494949;
}
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #D5EAFF;
color: #494949;
}
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #808080;
color: #FFF;
}
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #D5EAFF;
color: #494949;
}
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #808080;
color: #FFF;
}
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #D5EAFF;
color: #494949;
}
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #808080;
color: #fff;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
Всичко е наред засега, но това меню за да бачка на моя сайт трябва да изглежда по друг начин. Да не е с ul и li тагове а с div, а аз нещо неуспях да го направя ако вие успеете печелите точка! Ето с това меню трябва да го интегрирам с това:
Код:
div.menuBar,
div.menuBar a.menuButton, div.menuButton, div.menuButton_over,
div.menu,
div.menu a.menuItem {
font-family: arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #fff;
}
div.menuBar {
background-image: url(images/nav_bg.png);
padding: 8px 0px 8px 0px;
text-align: center;
}
div.emenuBar {
background-image: url(images/navbar_bg.png);
background-repeat: repeat-x;
text-align: center;
}
div.menuBar a.menuButton, div.menuButton, div.menuButton_over {
background-color: transparent;
color: #0fa1de
cursor: pointer;
left: 10px;
margin-bottom: 10px;
padding: 7px 15px 7px 15px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}
div.menuBar a.menuButton:hover, div.menuButton:hover, div.menuButton_over {
background-color: #0fa1de;
/*border-color: #ffffff #a5a5a5 #a5a5a5 #ffffff;*/
color: #000;
}
div.menuBar a.menuButtonActive, div.menuButtonActive, div.menuButtonActive:hover,
div.menuBar a.menuButtonActive:hover {
background-color: #0fa1de;
/*border-color: #a5a5a5 #ffffff #ffffff #a5a5a5;*/
color: #000;
left: 1px;
top: 0px;
}
div.menu {
background-color: #1F3A55;
border-top: #000 0px solid;
border-left: #000 1px solid;
border-right: #B2B2B2 1px solid;
left: 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
div.menu a.menuItem {
color: #fff;
border-top: #000 0px solid;
border-bottom: #B2B2B2 1px solid;
cursor: pointer;
display: block;
padding: 2px 11px 2px 0px;
text-decoration: none;
white-space: nowrap;
}
div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #467EAF; /* F0F6FF */
color: #000;
}
div.menu a.menuItem span.menuItemBuffer {
padding: 0px 2px 0px 2px;
color: #ffffff;
}
div.menu a.menuItem:hover span.menuItemBuffer {
padding: 0px 2px 0px 2px;
color: #000;
}
div.menu a.menuItem span.menuItemText {
padding: 0px 0px 0px 3px;
}
div.menu a.menuItem span.menuItemArrow {
margin-right: -.75em;
}
div.menu div.menuItemSep {
border-top: 0px solid #a5a5a5;
border-bottom: 1px solid #ffffff;
margin: 4px 2px;
}
a.menuItem.header {
border-bottom: 1px solid #b3b3b3;
}