Question

我正在尝试2层下拉菜单。我相信我已经掌握了一切，但我没有得到下降。还有:: after在记事本++中显示粉红色。那是对的吗？最终我试图实现5个水平菜单，最终实际上有一个垂直4下拉导航菜单。

    </header>
<nav id="nav_menu">
            <ul>
             <li><a href="index.html" class="current">Home</a></li>
             <li><a href="speakers.html">Speakers</a></li>
             <li><a href="luncheons.html">Luncheons</a></li>
             <li><a href="tickets.html">Get Tickets</a></li>
             <li class="lastitem"><a href="aboutus.html">About Us</a>
                <ul>
                    <li><a href="#">Our History</a></li>
                    <li><a href="#">Board of Directors</a></li>
                    <li><a href="#">Past Speakers</a></li>
                    <li><a href="#">Contact Information</a></li>
                </ul>
            </li>
        </ul>
    </nav>

    AND THEN THE CSS BELOW. I am confident that the html is correct I believe my trouble is in the CSS..


 #nav_menu ul{
        list-style-type: none;
        position: realative;}
    #nav_menu ul li {float: left;}
    #nav_menu ul ul {
        display: none;
        position: absolute;
        top: 100%;
    }
    #nav_menu ul ul li{float: none;}
    #nav_menu ul li:hover > ul{
    display: block; }
    #nav_menu > ul::after{
        content: "";
        display: block;
        clear: both;}
    #nav_menu ul li a {
        text-align: center;
        display: block;
        width: 160px;
        padding: 1em 0;
        text-decoration: none;
        background-color: #800000;
        color: white;
        font-weight: bold;}
    #nav_menu ul li a.lastitem{border-right:none;}
    #nav_menu ul li a.current {color: yellow;}

Answer 1

我在您的代码中进行了一些清理，主要问题是position: relative;元素上#nav_menu ul的拼写错误。因此下拉列表超出可见屏幕。请参阅下面的工作示例。

#nav_menu ul{
        list-style-type: none;
        position: relative;
    }
    #nav_menu ul li {
        float: left;
    }
    #nav_menu ul ul {
        display: none;
        position: absolute;
        top: 100%;
    }
    #nav_menu ul ul li{
      float: none;
    }
    #nav_menu ul li:hover > ul {
       display: block; 
    }
    
    #nav_menu > ul::after{
        content: "";
        display: block;
        clear: both;
    }
    
    #nav_menu ul li a {
        text-align: center;
        display: block;
        width: 160px;
        padding: 1em 0;
        text-decoration: none;
        background-color: #800000;
        color: white;
        font-weight: bold;
    }
        
    #nav_menu ul li a.lastitem{ 
        border-right:none;
    }
    
    #nav_menu ul li a.current {
        color: yellow;
    }

<nav id="nav_menu">
  <ul>
    <li><a href="index.html" class="current">Home</a></li>
    <li><a href="speakers.html">Speakers</a></li>
    <li><a href="luncheons.html">Luncheons</a></li>
    <li><a href="tickets.html">Get Tickets</a></li>
    <li class="lastitem"><a href="aboutus.html">About Us</a>
      <ul>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Board of Directors</a></li>
        <li><a href="#">Past Speakers</a></li>
        <li><a href="#">Contact Information</a></li>
      </ul>
    </li>
  </ul>
</nav>

下拉导航菜单html5

1 个答案: