c|_|
Banido
Boas pessoal, estou com um problma chato enquanto tento tratar de um menu css, tenho o seguinte código css:
E o seguinte código HTML:
O que pretendo é criar um menu css horizontal com multi-level, o primeiro multi level supostamente deverá aparecer para baixo, e o segundo multi level deve aparecer à direita mas neste momento aparece por baixo... O que está a falhar no meu css? Tentei seguir vários tutoriais mas não adianta...
PS: também nao estou a conseguir mudar a cor das letras do primeiro multilevel ao fazer hover...
Desde já obrigado.
.menu{width:963px;float:left;clear:both;background :url(bg.jpg) repeat-x;margin-top:25px;}
.menu ul{float:left;}
.menu ul li{float:left;padding:0px ;width:auto;}
.menu ul li img{float:left;margin:10px 0px 0px 0px;}
.menu ul li a{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 10px 0px 5px;margin:0px;float:left;width:auto;}
.menu ul li a span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;}
.menu ul li a.active span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;}
.menu ul li a span:hover, .menu li a.active{background:url(navi_hover.png) repeat-x;font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;}
.menu ul li a .icon1:hover,.menu li a.active span.icon1{background:url(1_hover.png) right 10px no-repeat;}
.menu ul li a .icon2:hover,.menu li a.active span.icon2{background:url(2_hover.png) right 10px no-repeat;}
.menu ul li a .icon3:hover,.menu li a.active span.icon3{background:url(3_hover.png) right 10px no-repeat;}
.menu ul li a .icon4:hover,.menu li a.active span.icon4{background:url(4_hover.png) right 10px no-repeat;}
.menu ul li a .icon5:hover,.menu li a.active span.icon5{background:url(5_hover.png) right 10px no-repeat;}
.menu ul li a .vip:hover,.menu li a.active span.vip{background:url(6_hover.png) right 10px no-repeat;}
.menu ul li a .near:hover,.menu li a.active span.near{background:url(7_hover.png) right 10px no-repeat;}
.icon1{float:left;background:url(1.png) right 10px no-repeat;}
.icon2{float:left;background:url(2.png) right 10px no-repeat;}
.icon3{float:left;background:url(3.png) right 10px no-repeat;}
.icon4{float:left;background:url(4.png) right 10px no-repeat;}
.icon5{float:left;background:url(5.png) right 10px no-repeat;}
.vip{float:left;background:url(6.png) right 10px no-repeat;}
.near{float:left;background:url(7.png) right 10px no-repeat;}
.menu ul ul{
position:absolute;
width:12em;
top:5.6em;
display:none;
float:left;
clear:both;
background:url(menu_bg.jpg);
}
.menu ul ul a{
width:12em;
float:left;
}
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{
display:none;
}
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
display:block;
}
.menu ul li a:hover,.menu li a.active{background:url(navi_hover.png) repeat-x;}
.downarrow{background:url(downarrow.png) center 43px no-repeat;}
.menu li:hover div.bg_downarrow{display:block;}
.menu ul li.m_spliter{float:left;height:42px;background:url (divisor.png) right 2px no-repeat;}
.menu ul li.m_spliter:last-child{background:none;}
.menu ul{float:left;}
.menu ul li{float:left;padding:0px ;width:auto;}
.menu ul li img{float:left;margin:10px 0px 0px 0px;}
.menu ul li a{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 10px 0px 5px;margin:0px;float:left;width:auto;}
.menu ul li a span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;}
.menu ul li a.active span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;}
.menu ul li a span:hover, .menu li a.active{background:url(navi_hover.png) repeat-x;font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;}
.menu ul li a .icon1:hover,.menu li a.active span.icon1{background:url(1_hover.png) right 10px no-repeat;}
.menu ul li a .icon2:hover,.menu li a.active span.icon2{background:url(2_hover.png) right 10px no-repeat;}
.menu ul li a .icon3:hover,.menu li a.active span.icon3{background:url(3_hover.png) right 10px no-repeat;}
.menu ul li a .icon4:hover,.menu li a.active span.icon4{background:url(4_hover.png) right 10px no-repeat;}
.menu ul li a .icon5:hover,.menu li a.active span.icon5{background:url(5_hover.png) right 10px no-repeat;}
.menu ul li a .vip:hover,.menu li a.active span.vip{background:url(6_hover.png) right 10px no-repeat;}
.menu ul li a .near:hover,.menu li a.active span.near{background:url(7_hover.png) right 10px no-repeat;}
.icon1{float:left;background:url(1.png) right 10px no-repeat;}
.icon2{float:left;background:url(2.png) right 10px no-repeat;}
.icon3{float:left;background:url(3.png) right 10px no-repeat;}
.icon4{float:left;background:url(4.png) right 10px no-repeat;}
.icon5{float:left;background:url(5.png) right 10px no-repeat;}
.vip{float:left;background:url(6.png) right 10px no-repeat;}
.near{float:left;background:url(7.png) right 10px no-repeat;}
.menu ul ul{
position:absolute;
width:12em;
top:5.6em;
display:none;
float:left;
clear:both;
background:url(menu_bg.jpg);
}
.menu ul ul a{
width:12em;
float:left;
}
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{
display:none;
}
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
display:block;
}
.menu ul li a:hover,.menu li a.active{background:url(navi_hover.png) repeat-x;}
.downarrow{background:url(downarrow.png) center 43px no-repeat;}
.menu li:hover div.bg_downarrow{display:block;}
.menu ul li.m_spliter{float:left;height:42px;background:url (divisor.png) right 2px no-repeat;}
.menu ul li.m_spliter:last-child{background:none;}
E o seguinte código HTML:
<div class="menu ">
<ul>
<li class="m_spliter">
<a href="" title="" <span class="vip">Vip</span></a>
<ul>
<li><a href="#">sub-menu1</a>
<ul>
<li><a href="#">sub-menu1.1</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#">sub-menu1.1.1</a></li>
<li><a href="#">sub-menu1.1.2</a></li>
</ul>
</li>
<li><a href="#">sub-menu1.2
<ul>
<li><a href="#">sub-menu1.2.1</a></li>
<li><a href="#">sub-menu1.2.2</a></li>
<li><a href="#">sub-menu1.2.3</a></li>
</ul>
</li>
<li><a href="#">sub-menu1.3</li>
<li><a href="#">sub-menu1.4</li>
</ul>
</li>
<li><a href="#">sub-menu2</a>
<ul>
<li><a href="#">sub-menu2.1</a>
<ul>
<li><a href="#">sub-menu2.1.1</a></li>
<li><a href="#">sub-menu2.1.2</a></li>
<li><a href="#">sub-menu2.1.3</a></li>
</ul>
</li>
<li><a href="#">sub-menu2.2</a>
<ul>
<li><a href="#">sub-menu2.2.1</a></li>
<li><a href="#">sub-menu2.2.2</a></li>
<li><a href="#">sub-menu2.2.3</a></li>
</ul>
</li>
</li>
</ul>
<li><a href="#">sub-menu3</a></li>
</ul>
</li>
</ul>
</div>
<ul>
<li class="m_spliter">
<a href="" title="" <span class="vip">Vip</span></a>
<ul>
<li><a href="#">sub-menu1</a>
<ul>
<li><a href="#">sub-menu1.1</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#">sub-menu1.1.1</a></li>
<li><a href="#">sub-menu1.1.2</a></li>
</ul>
</li>
<li><a href="#">sub-menu1.2
<ul>
<li><a href="#">sub-menu1.2.1</a></li>
<li><a href="#">sub-menu1.2.2</a></li>
<li><a href="#">sub-menu1.2.3</a></li>
</ul>
</li>
<li><a href="#">sub-menu1.3</li>
<li><a href="#">sub-menu1.4</li>
</ul>
</li>
<li><a href="#">sub-menu2</a>
<ul>
<li><a href="#">sub-menu2.1</a>
<ul>
<li><a href="#">sub-menu2.1.1</a></li>
<li><a href="#">sub-menu2.1.2</a></li>
<li><a href="#">sub-menu2.1.3</a></li>
</ul>
</li>
<li><a href="#">sub-menu2.2</a>
<ul>
<li><a href="#">sub-menu2.2.1</a></li>
<li><a href="#">sub-menu2.2.2</a></li>
<li><a href="#">sub-menu2.2.3</a></li>
</ul>
</li>
</li>
</ul>
<li><a href="#">sub-menu3</a></li>
</ul>
</li>
</ul>
</div>
O que pretendo é criar um menu css horizontal com multi-level, o primeiro multi level supostamente deverá aparecer para baixo, e o segundo multi level deve aparecer à direita mas neste momento aparece por baixo... O que está a falhar no meu css? Tentei seguir vários tutoriais mas não adianta...
PS: também nao estou a conseguir mudar a cor das letras do primeiro multilevel ao fazer hover...
Desde já obrigado.