CSS菜单列表双重嵌套

我想要一个带有鼠标悬停显示属性的菜单它内部我想使用第二个无序列表来显示第二个隐藏菜单。问题是我的第一条规则覆盖了第二个菜单属性和所有列表项显示。这是我的菜单html。CSS菜单列表双重嵌套

<ul id="menu"> 
    <li class="current"><a href="./index.html">ANASAYFA</a></li> 
    <li><a href="./blog-1.html">HAKKIMIZDA</a></li> 
    <li><a href="./portfolio-3c.html">HİZMETLERİMİZ</a> 
     <ul> 
      <li><a href="./portfolio-3c.html">Eğitim Hizmetlerimiz</a> 
       <ul class="menu2"> 
        <li class="current"><a href="./blog-1.html">Ygs-Lys hazırlık programları</a></li> 
        <li><a href="./blog-2.html">Sbs'ye Hazırlık programı'</a></li> 
        <li><a href="./blog-1.html">Ana sınıg 1'e 1 test programı</a></li> 
        <li><a href="./blog-2.html">Okul destek programı</a></li> 
       </ul> 
      </li> 
      <li><a href="./portfolio-2c.html">Neurofeedback</a></li> 
      <li><a href="./portfolio-2c.html">Bioofeedback</a></li> 
     </ul> 
    </li> 
    <li><a href="./gallery.html">GALERİ</a></li><li><a href="#">STYLINGS</a> 
    <li><a href="./stylings-texts.html">SANAL TUR</a></li> 
    <li><a href="./stylings-table_columns.html">BİZE ULAŞIN</a> 
     <ul> 
      <li><a href="#">İletişim Formu</a></li> 
      <li><a href="#">İletişim Bilgileri</a></li> 
     </ul> 
    </li> 
</ul>

这是菜单我的CSS文件原单和MENU2嵌套UL

#sidebar #sidebar-content #menu2 {margin: 0px auto;width: 100%;z-index: 30;float: left;} 
#sidebar #sidebar-content #menu2 li {line-height: 32px;text-align: center;width: 100%;background-image: url('../images/menu_li.png'); 
background-repeat: no-repeat;background-position: bottom center;clear: left;float: left;color: #999999;} 
#sidebar #sidebar-content #menu2 li a, #sidebar #sidebar-content #menu2 .current ul li a {font-size: 12px;font-weight: normal;display: block;color: #999999;} 
#sidebar #sidebar-content #menu2 li:hover{background-image: url('../images/menu_li_hover.png');} 
#sidebar #sidebar-content #menu2 li a:hover, #sidebar #sidebar-content #menu2 .current a, #sidebar #sidebar-content #menu2 li ul li a:hover{color: #ffffff; } 
#sidebar #sidebar-content #menu2 li ul{display: none;}#sidebar #sidebar-content #menu2 li ul li{background-image: url('../images/menu_subli.png');} 
#sidebar #sidebar-content #menu2 li ul li a{font-size: 11px;}

你能告诉我一个方法，使工作？

来源

2012-07-11 ytsejam

而不是使用您的代码请尝试以下代码http://www.dynamicdrive.com/dynamicindex1/popupmenu.htm – 2012-07-11 08:28:27

您可以防止第一条规则使用覆盖性能

menu > li { /* css properties */ }

这只会影响直接li's

或者你也可以使用这样的事情 -

#menu2 ul li { /* write the css again so the override does not happen */ }

来源

2012-07-11 08:19:48 Ashwin

谢谢MotaBos – ytsejam 2012-07-11 08:41:27

CSS菜单列表双重嵌套

回答

相关问题