Question

请有人帮助我。我试图弄清楚为什么第三级菜单没有隐藏。

感谢您的帮助。网址如下：

http://www.aimsmediatesting.co.uk/solar/SF/SF/

   <nav class="relative sixteen columns">
  <ul>
    <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/">Home</a> </li>
    <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/?id=about-us">About us</a> </li>
    <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/?id=solar-pv-panels">Solar PV</a>
      <ul>
        <li><a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/?id=benefits-of-solar-panels">Benefits of Solar Panels</a></li>
        <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/?id=how-solar-panels-work">How Solar Panels Work</a>
          <ul>
            <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=feed-in-tariff">Feed in Tariffs</a> </li>
            <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=how-are-the-panels-installed">How Panels are installed</a> </li>
          </ul>
        </li>
        <li><a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/?id=why-choose-us">Why Choose Us</a></a></li>
        <li><a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/?id=insurance-backed-guarantee">Insurance Backed Guarantee</a></a></li>
      </ul>
    </li>
    <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=thermodynamic-hot-water-systems">ThermoDynamic</a> </li>
    </li>
    <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=solar-thermal">Solar Thermal</a> </li>
    </li>
    <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=energy-saver-voltage-optimiser">Energy Saver Optimiser</a> </li>
    </li>
    <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=testimonials">Testimonials</a>
      <ul>
        <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=michael-muller-testimonial">Michael Muller</a> </li>
        <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=gordon-porter-testimonial">Gordon Porter</a> </li>
        <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=thomas-hagan">Thomas Hagan</a> </li>
        <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=john-macbean">John MacBean</a> </li>
        <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=cameron-case-study">Cameron CS</a> </li>
        <li> <a href="http://www.aimsmediatesting.co.uk/solar/SF/SF/index.php?id=installation-map">Installation Map</a> </li>
      </ul>
    </li>
  </ul>
</nav>

我的CSS

nav{
    width:100%;
    background: #118542;
    display:block;
    height:45px;

}
nav ul{
    display:inline;
}

nav li{
    float:left;
    padding: 12px;
}
nav li a{
    color:#fff!important;
    padding:5px;
    font-size:14px;
    font-weight:bold;
}
nav li a{
    color:#fff!important;
}

nav ul ul{
    display:none;
}
nav li:hover > ul a {
background: #58595b;
padding-top: 10px;
color: #FFFFFF;
text-decoration: none;
}
nav li:hover > ul {
background: #58595b;
padding-top: 10px;
color: #FFFFFF;
text-decoration: none;
}
nav li > ul > li:hover > ul {
left: 180px;
position: absolute !important;
top: 0;
}
nav li li{
position:relative;
}

nav li li ul{
 display:none;
}


nav li li ul:hover{
    display:block;
    position:absolute;
    top:0;
    left:100%;
}
nav li a:hover {
    padding-top:10px;
    color:#fff!important;
    padding-bottom:10px;

}
nav li ul {
    display:none;
    height:auto;
    margin:0px;
    border:0px;
    position:absolute;
    width:200px;
    z-index:200;
}
nav li:hover ul {
    display:block;
}
nav li ul {
    top: 34px;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:200px;
    z-index:200;
}
nav li:hover ul {
    display:block;
}
nav li li {
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:200px;
    background:#58595b;/*this is where the rounded corners for the dropdown disappears*/
}
nav li:hover li a {
    background:none;
}
nav ul li:hover a {
    background:#58595b;
    padding-top:10px;
    color:#FFFFFF;
    text-decoration:none;
}
nav li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    margin: 0px;
    padding: 10px 10px 10px 15px;
    text-align: left;
}

如果有人能帮我弄清楚我需要添加或更改哪个课程，我将非常感谢你的帮助。

由于

Answer 1

这是由nav li:hover ul{display:block;}规则引起的。一旦顶级项目悬停，它将启用所有级别的子菜单。

将其更改为仅影响直接子女（而不是后代）

nav li:hover > ul{
    display:block;
}

（你的代码也有两次规则，所以删除两个实例中的一个）

3级菜单的css无法隐藏第三级

1 个答案: