和女孩们!
我制作了一个CSS菜单,有2个子级别。第二级正常工作。但是当这些二级菜单中的某些菜单有一个子菜单时,这个消失的背景......
Here正在解决问题
如果你去菜单:“PARAVOCÊ”并悬停“LINHASDECRÉDITO”你会看到问题......
这是我的HTML代码:
<div id="menu_principal" class="wrap">
<div class="inner clearfix">
<ul id="ja-cssmenu" class="clearfix topnav">
<li class="active">
<a href="http://www.sicoobes.net/" class="menu-item0 active first-item" id="menu1" title="Principal">
<span class="menu-title">PRINCIPAL</span>
</a>
</li>
<li class="havechildmenu-item1">
<a href="/index.php/o-sicoob" class="menu-item1 haschild" id="menu54" title="O Sicoob">
<span class="menu-title">O SICOOB</span>
</a>
<ul class="subnav">
<li><a href="#">Institucional</a></li>
<li><a href="#">Equipe</a>
<ul class="sub_subnav">
<li><a href="#">Conselho Administrativo</a></li>
<li><a href="#">Diretoria Executiva</a></li>
<li><a href="#">Conselho Fiscal</a></li>
</ul>
</li>
<li><a href="#">Código de Ética</a></li>
<li><a href="#">Demonstrações</a></li>
<li><a href="#">Estatuto</a></li>
<li><a href="#">Políticas</a></li>
<li><a href="#">Regimentos</a></li>
</ul>
</li>
<li class="havechildmenu-item1">
<a href="/index.php/o-sicoob" class="menu-item1 haschild" id="menu54" title="O Sicoob">
<span class="menu-title">PARA VOCÊ</span>
</a>
<ul class="subnav">
<li><a href="#">Conta Corrente</a></li>
<li><a href="#">Linhas de Crédito</a>
<ul class="sub_subnav">
<li><a href="#">Financiamento Veículos e outros</a></li>
<li><a href="#">Credito Retorno Parcelado</a></li>
</ul>
</li>
<li><a href="#">Seguros</a>
<ul class="sub_subnav">
<li><a href="#">Vida</a></li>
<li><a href="#">Automóvel</a></li>
<li><a href="#">Residencial</a></li>
<li><a href="#">Vida Mulher</a></li>
</ul>
</li>
<li><a href="#">Soluções de Investimentos</a>
<ul class="sub_subnav">
<li><a href="#">Fundos de investimento (liquidez diária).</a></li>
</ul>
</li>
</ul>
</li>
<li class="havechildmenu-item1">
<a href="/index.php/o-sicoob" class="menu-item1 haschild" id="menu54" title="O Sicoob">
<span class="menu-title">PARA SUA EMPRESA</span>
</a>
</li>
</ul>
</div>
</div>
现在,CSS:
#menu_principal{
bottom:0;
position:relative;
margin:0 auto;
width:980px;
height:35px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-image:url(imagens/menu_bg.gif);
background-position:50% 0;
background-repeat:no-repeat no-repeat;
}
.wrap {
clear:both;
width:100%;
}
.clearfix{
display:block;
}
ul.topnav {
float:left;
margin:0;
padding:0;
}
ul.topnav {
list-style-image:initial;
list-style-position:initial;
list-style-type:none;
}
ul.topnav li {
background-image:url(imagens/sep.gif);
background-position:100% 0;
background-repeat:no-repeat no-repeat;
cursor:pointer;
display:block;
float:left;
height:35px;
margin:0;
padding:0;
cursor:pointer;
}
ul.topnav li a {
color:#FFFFFF;
display:block;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
font-weight:bold;
height:35px;
margin:0;
padding-bottom:0;
padding-left:15px;
padding-right:15px;
padding-top:0;
text-decoration:none;
text-transform:uppercase;
}
ul.topnav span.menu-title {
text-shadow:#111111 0 1px 0;
}
ul.topnav span.menu-title {
display:block;
font-size:110%;
padding-top:8px;
}
ul.topnav li a.first-item {
border-left-color:initial;
border-left-style:initial;
border-left-width:0;
}
ul.topnav li:hover, ul.topnav li a.active{
background-image:url(imagens/bg_itens_menu.gif);
background-position:-15px -48px;
}
ul.topnav li a.active.first-item {
background-position:-403px -48px;
}
ul.topnav li ul.subnav {
list-style: none;
background: #333;
margin: 0; padding: 0;
display: none;
width: 200px;
border: 1px solid #111;
position: absolute;
}
ul.topnav li:hover ul.subnav{
display: block;
padding: 0;
width: 200px;
}
ul.topnav li ul.subnav li{
margin: 0; padding:0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
width: 200px;
}
ul.topnav li ul.subnav li a{
margin-top:8px;
color: #fff;
height:35px;
}
ul.topnav li ul.subnav li:hover{
text-shadow:#111111 0 1px 0;
}
ul.topnav li ul.subnav li ul.sub_subnav{
list-style: none;
left:201px;
top:-45px;
margin:0;
padding:0;
display:none;
width:300px;
border:1px solid #111;
background-color: #333333;
position:relative;
}
ul.topnav li ul.subnav li:hover ul.sub_subnav{
display: block;
}
ul.topnav li ul.subnav li ul.sub_subnav li{
margin: 0; padding:0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
width: 300px;
}
感谢您的帮助!
答案 0 :(得分:0)
从float
删除.sub_subnav li
。写得像这样:
ul.topnav li ul.subnav li ul.sub_subnav li {
float: none;
}
OR
你可以这样写:ul.topnav > li{
float:left;
}
答案 1 :(得分:0)
您在ul.topnav li
上设置了一个浮动设置,只应在ul.topnav > li
上设置
PS:你不需要subnav或sub_subnav类,因为你可以使用css选择器来处理这个