2级菜单消除了背景 [英] Menu with 2 levels disapear the background
本文介绍了2级菜单消除了背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
和女孩！
我做了一个CSS菜单，有2个子级别。第二级正常工作。但是，当这些二级菜单中的一些菜单有子菜单时，这个消失的背景......
这里是有关问题的工作示例
如果转到菜单： PARAVOCÊ和悬停的LINHAS DECRÉDITO你看到了问题... ...
这是我的HTML代码：
< div id =menu_principalclass =wrap>
< div class =inner clearfix>
< ul id =ja-cssmenuclass =clearfix topnav>
< li class =active>
< span class =menu-title> PRINCIPAL< / span>
< / a>
< / li>
< li class =havechildmenu-item1>
< a href =/ index.php / o-sicoobclass =menu-item1 haschildid =menu54title =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财政< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>CódigodeÉtica< / a>< / li>
< li>< a href =＃>Demonstrações< / a>< / li>
< li>< a href =＃> Estatuto< / a>< / li>
< li>< a href =＃>政策< / a>< / li>
< li>< a href =＃> Regimentos< / a>< / li>
< / ul>
< / li>
< li class =havechildmenu-item1>
< a href =/ index.php / o-sicoobclass =menu-item1 haschildid =menu54title =O Sicoob>
< span class =menu-title> PARAVOCÊ< / span>
< / a>
< ul class =subnav>
< li>< a href =＃> Conta Corrente< / a>< / li>
< li>< a href =＃> Linhas deCrédito< / a>
< ul class =sub_subnav>
< li>< a href =＃> FinanciamentoVeículose 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çõesde Investimentos< / a>
< ul class =sub_subnav>
< li>< a href =＃> Fundos de investimento（liquidezdiária）。< / a>< / li>
< / ul>
< / li>
< / ul>
< / li>
< li class =havechildmenu-item1>
< a href =/ index.php / o-sicoobclass =menu-item1 haschildid =menu54title =O Sicoob>
< span class =menu-title> PARA SUA EMPRESA< / span>
< / a>
< / li>
< / ul>
< / div>
< / div>
现在，CSS：
#menu_principal {
bottom：0;
职位：亲属;
保证金：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;
背景重复：不重复不重复;
}
.wrap {
clear：both;
宽度：100％;
}
.clearfix {
display：block;
}
ul.topnav {
float：left;
保证金：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;
背景重复：不重复不重复;
光标：指针;
display：block;
float：left;
height：35px;
保证金：0;
padding：0;
光标：指针;
}
ul.topnav li a {
color：#FFFFFF;
display：block;
font-family：'Trebuchet MS'，Arial，Helvetica，sans-serif;
font-weight：bold;
height：35px;
保证金：0;
padding-bottom：0;
padding-left：15px;
padding-right：15px;
padding-top：0;
text-decoration：none;
text-transform：大写;
}
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;
背景：＃333;
保证金：0;填充：0;
display：none;
width：200px;
border：1px solid＃111;
位置：绝对;
}
ul.topnav li：hover ul.subnav {
display：block;
padding：0;
width：200px;
}
ul.topnav li ul.subnav li {
margin：0;填充：0;
border-top：1px solid＃252525;
border-bottom：1px solid＃444;
width：200px;
}
ul.topnav li ul.subnav li a {
margin-top：8px;
颜色：#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;
保证金：0;
padding：0;
display：none;
width：300px;
border：1px solid＃111;
背景颜色：＃333333;
职位：亲属;
}
ul.topnav li ul.subnav li：hover ul.sub_subnav {
display：block;
}
ul.topnav li ul.subnav li ul.sub_subnav li {
margin：0;填充：0;
border-top：1px solid＃252525;
border-bottom：1px solid＃444;
width：300px;
$ / code> 感谢您的帮助！
解决方案
从 .sub_subnav li 中删除 float 。这样写：
ul.topnav li ul.subnav li ul.sub_subnav li {
float：none;
}
OR
你可以这样写：
ul.topnav> li {
float：left;
}
and girls!
i have make a CSS menu, with 2 sub-level. The second level works properly. But when some of these second level menu has a sub-menu, the background of this disapear....
Here is working example with the problem
If you go to the menu: "PARA VOCÊ" and hover "LINHAS DE CRÉDITO" you see the problem...
this is my HTML Code:
<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>
and now, the 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;
}
thanks for help!
解决方案
Remove float from your .sub_subnav li. Write like this:
ul.topnav li ul.subnav li ul.sub_subnav li {
float: none;
}
OR
you can write like this:
ul.topnav > li{
float:left;
}
这篇关于2级菜单消除了背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
