垂直菜单与子菜单，但父链接不保持活动

我一直在用CSS重做一个垂直菜单，可以在下面的代码中看到，我似乎无法获得第一个菜单选项保持活动时，第一个子菜单选项和第一个和第二个菜单在第三个子菜单上时保持活动状态。垂直菜单与子菜单，但父链接不保持活动

我在这里错过了什么？

我也一直在努力使它在所有浏览器中都能以不同的方式工作。我怎样才能使它适用于大多数，即使不是所有的浏览器，以及限制在哪里？

下面是我写的CSS：

#nav li a { 
    display:block; 
    width:250px; 
    height:30px; 
    color:#FFF; 
    background-color: #33b4d4; 
    text-decoration:none; 
    font-size:1em; 
    line-height:1.8em; 
    font-weight:bold; 
    border:1px solid #000; 
    text-indent:20px; 
} 

#nav li a:hover { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
} 

#nav ul.menu { 
    display:block; 
    width:250px; 
    margin:0; 
    padding:0; 
    list-style-type: none; 
} 
#nav ul.menu > li, #nav ul.menu ul > li , #nav ul.menu ul > li > ul > li { 
    float: left; 
    display:block; 
    width:250px; 
    height:30px; 
    background-color: #33b4d4; 
    text-indent:20px; 
} 
#nav ul.menu ul ul li { 
    float: none; 
} 
#nav li > ul { 
    display: none; 
} 
#nav li:hover > ul { 
    position: absolute; 
    display:block; 
    width:250px; 
    padding:0; 
    margin-top:-22px; 
    margin-left:220px; 
}

并且在下面的菜单：

 <div id="nav"> 
      <ul class="menu"> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
      </ul>

我试图改变：

#nav li a:hover { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
}

要：

#nav ul.menu > li:hover a { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
}

但现在父链接保持活动状态，但所有的子菜单链接也同时处于活动状态。我错过了什么？

来源

2013-08-03 R A

您应该更改li：hover上的链接颜色。

#nav li:hover > a { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
}

JSFiddle

来源

2013-08-03 08:54:09 drip

谢谢。这是送我坚果！它正在工作，但后来我无法弄清楚哪里出了问题。谢谢。 –

任何想法如何使这项工作适用于所有浏览器？ –

您如何使第一个（父母）类别具有不同的背景？ –

垂直菜单与子菜单，但父链接不保持活动

回答

相关问题