Question

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

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

并将第一个导航列表设置为显示为内联块，如下所示：

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>

Answer 2

这里我添加了一些HTML代码

<nav>
    <ul>
        <li>
            <a href='#'>Test</a>
            <ul id='submenu'>
                <li>Submenu Test</li>
                <li>Submenu Test</li>
                <li>Submenu Test</li>
            </ul>
        </li>
        <li><a href='#'>Test</a></li>
        <li><a href='#'>Test</a></li>
    </ul>
</nav>

<style>
    nav {
        background-color: rbga(0,0,0,.65);
        position: absolute;
        top: 0px; left: 0px;
        padding: 50px 0 0 0;
        width: 100%;
    }

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

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

    nav ul li a {
        display: inline-block;
        padding: 10px 20px;
        text-decoration: none;
        width: 250px;
        position: relative;
    }
</style>

如果您在悬停时看到该框出现，那太好了！

将鼠标悬停在导航栏元素（CSS）上时，我的子菜单未显示

2 个答案: