Question

当我使用＆＃34; position：absolute＆＃34;添加下拉菜单时，我想添加＆＃34; position：relative＆＃34;离它最近的祖先＆＃34; li.dropDownBtn＆＃34;并发现它使整个下拉菜单消失。我一直试图找出原因，但仍然没有得到答案。有人可以帮我这个吗？非常感谢！

＆＃13;

<html>
    <head>
    <style>
        ul.navBar {
            list-style-type: none;
            margin: 0px;
            padding:0px;
            overflow: hidden; 
            background-color: #4277f4;
            cursor: pointer;
        }

        li {
            float: left;
        }

        li a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 20px;
            text-decoration: none;
        }

        li:hover {
            background-color: #A2AEB3;
        }
        
        /*When this is added, the dropdown disappear
        li.dropDownBtn {
            position: relative
        }
        */

        .dropDownContent {
            display: none;
            position: absolute;
            background-color: #7DC9E3;
            width: 150px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
            text-decoration: none;
            
        }
        .dropDownContent a {
            color: white;
            display: block;

        }
        .dropDownContent a:hover{
            background-color: #4A96B0;
        }


        li.dropDownBtn:hover .dropDownContent{
            display: block;
        }

    </style>
    </head>

    <body>
        <ul class="navBar">
        <li><a href="#">Home</a></li>
        <li class="dropDownBtn"><a href="#">Products</a>
            <div class="dropDownContent">
                <a href="#">Product1</a>
                <a href="#">Product2</a>
                <a href="#">Product3</a>
            </div>
        </li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>
    </body>
    </html>

＆＃13;

此处为此导航栏页面的jsfiddle。

Answer 1

主菜单上的

overflow: hidden使子菜单无法显示。我假设您正在使用它来清除导航菜单中的浮动，因此添加了一个.clearfix，其中使用了不使用overflow: hidden并删除{{overflow: hidden的其他技术。 1}}来自菜单的CSS

＆＃13;

ul.navBar {
    list-style-type: none;
    margin: 0px;
    padding:0px;
    background-color: #4277f4;
    cursor: pointer;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    text-decoration: none;
}

li:hover {
    background-color: #A2AEB3;
}

li.dropDownBtn {
  position: relative;
}

.dropDownContent {
    display: none;
    position: absolute;
    background-color: #7DC9E3;
    width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-decoration: none;
    
}
.dropDownContent a {
    color: white;
    display: block;

}
.dropDownContent a:hover{
    background-color: #4A96B0;
}


li.dropDownBtn:hover .dropDownContent{
    display: block;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

<body>
    <ul class="navBar clearfix">
        <li><a href="#">Home</a></li>
        <li class="dropDownBtn"><a href="#">Products</a>
            <div class="dropDownContent">
                <a href="#">Product1</a>
                <a href="#">Product2</a>
                <a href="#">Product3</a>
            </div>
        </li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>

＆＃13;

Answer 2

设置ul.navBar的高度并取出溢出隐藏

ul.navBar {
    list-style-type: none;
    margin: 0;
    padding:0;
    background-color: #4277f4;
    cursor: pointer;
    height:55px;
}

Answer 3

这是因为你有这个设置：

.dropDownContent {
   display: none;
   position: absolute;
etc.

这意味着默认情况下不显示下拉列表（通常是所需的功能......）。

然后你有了这个规则，当你将其li父母悬停时它会显示出来：

li.dropDownBtn:hover .dropDownContent{
  display: block;
}

这就是CSS下拉菜单的工作方式，你不喜欢什么？

为什么当其祖先的位置设置为相对时，下拉菜单会消失？

3 个答案: