Question

我尝试创建一个下拉菜单，但不是下拉菜单位于其中一个主菜单按钮下面而且看不见，除非盘旋在它上面并且可见。我错过了什么？

<body>
<div class="nav-bar">
        <nav class="box-nav-bar">
            <ul>
                <li> <a href="/Home">HOME</a></li>
                <li> <a href="/Home">ABOUT</a></li>
                <li> <a href="/Home">SERVICES</a>
                    <ul class="drop_down">
                        <li>
                            <a href="#">Lorem ipsum</a>
                        </li>
                        <li>
                            <a href="#">Dolor sit amet  </a>                      
                        </li>
                        <li>
                            <a href="#">Conse ctetur </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">Latest</a>
                                    </li>
                                    <li>
                                        <a href="#">Archive</a>
                                    </li>                      
                                </ul>
                        </li>
                    </ul>
                </li>
                <li> <a href="/Home">PROJECTS</a></li>
                <li> <a href="/Home">CONTACTS</a></li>
            </ul>
        </nav>
  </body>

CSS代码：

.box-nav-bar ul{
    display:inline-block;

    text-decoration: none;
    padding-top: 20px;


}
.box-nav-bar ul li{
    display: inline-block;
    padding: 20px;
    border: 1px solid grey;
    width: 100px;
    height: 50px;
    line-height: 50px;

    text-align: center;

}
.box-nav-bar ul li a{
    text-decoration: none;
    list-style: none;
    color: black;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial;
}
.box-nav-bar ul li:hover{
    background-color: grey;

}

谢谢

Answer 1

找到了它。我需要在drop_down类中显示：none。

创建下拉菜单并显示主菜单下的子菜单

1 个答案: