css - 将鼠标悬停在导航栏元素 (CSS) 上时，我的子菜单未显示

Question

我需要将鼠标悬停在导航栏上相应的导航元素上时显示子菜单。对于二级导航列表，我设置display为none如下

nav ul ul { 
    position:absolute; top: 100%;
    background-color: #2b0306; 
    display: none;
}

并设置第一个导航列表显示为inline-block如下:

nav ul li a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    width: 250px;
    position: relative;
} 
nav ul li a:visited { color: #fff; }
nav ul li a:hover { background-color: #6d0911; }
nav ul ul { position:absolute; top: 100%; background-color: #2b0306; display: none; }
nav ul ul li { position: relative; }
nav ul ul ul { left: 100%; top: 0px; }

至于导航位置，我设置为绝对:

nav {
    background-color: rbga(0,0,0,.65);
    position: absolute;
    top: 0px; left: 0px;
    padding: 50px 0 0 0;
    width: 100%;
}
nav::after { content: ' '; display: block; clear: both; }
nav ul { list-style: none; margin: 0; padding: 0px; }
nav ul li: hover { background-color: #2b0306; }
nav ul li: hover > ul { display: block; }

/* top-level */
nav > ul { padding-left: 300px; }
nav > ul > li { float: left; }
nav > ul > li > a { 
width: auto; 
padding: 10px 20px 15px 20px; 

这是 HTML 代码:

<nav>
        <ul><!--first level navigation-->
            <li><a title="About Us" href="aboutATMC.php" >About Us</a></li>
            <li>
                <a title="Services" href="#" aria-haspopup ="true">Services</a>
                <ul><!--Second level navigation-->

                    <li><a title="Consultancy" href="#">Consultancy</a></li>
                    <li>
                        <a title="Learning &amp; Development Solutions" href="#" aria-haspopup ="true">Learning &amp; Development Solutions</a>
                            <ul><!--Third level navigation-->
                                <li><a title="Training &amp; Coaching" href="#">Training &amp; Coaching</a></li>
                                <li><a title="Learning Material" href="#">Learning Material</a></li>
                            </ul><!--End of third level-->
                    </li>

                </ul><!--end of second level-->
            </li>
            <li><a onclick="toggleNavPanel ('contact_panel')" id = "contactus" href="#" >Contact Us <span id="navarrow"> &#9662;</span></a></li>
        </ul><!--End of first level-->
    </nav>

有什么建议吗？

Answer 1

试试这个:

/* top menu */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li a {
  padding: 10px;
  display: inline-block;
}
nav > ul > li {
  display: inline-block;
}

/* sub menu */
nav > ul > li > ul {
  display: none;
  position: absolute;
  background-color: #ccc;
}
nav ul li:hover {
  background-color: #ccc;
}
nav ul li:hover ul {
  display: block;
}

<nav>
  <ul>
    <li>
      <a href="#">Menu A</a>
      <ul>
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu B</a>
    </li>
  </ul>
</nav>