Question

我想在CSS中创建一个下拉菜单...我已经有了一个菜单＆＃34; fixed＆＃34;位置（第一个菜单必须修复，没有别的）但是当我尝试设计我的下拉菜单时，其中的项目不会转到我想要的位置并始终与第一个菜单对齐... 请告诉我们如何正确地做到这一点....

＆＃13;

#menu {
            overflow: hidden;
            position: fixed;
            top: 0;
            width: 50%;
            margin-left: 25%;
            background-color: #333;
            color: #f2f2f2;
        }
        .menu-content {
            float: left;
            display: block;
            text-decoration: none;
            padding: 25px 20px;
            font-size: 17px;
        }
        #products {
            padding-top: 25px;
            font-size: 22px;
        }     
        .dropdown {
            float: left;
            overflow: hidden;
        }
        .dropdown .dropdown-btn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            z-index: 1;
        }
        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: center ;
        }       
        .dropdown:hover .dropdown-content {
            display: block;
        }

＆＃13;

<body>
    <div id="menu">
        <div class="dropdown">
            <button id="products" class="dropdown-btn menu-content"> <i class="fa fa-bars"></i> products  </button>
            <div class="dropdown-content">
                <a> speaker </a>
            </div>
        </div>     
    </div
</body>

＆＃13;

这是我得到的结果： enter image description here

Answer 1

只需删除

#menu {
  overflow: hidden; <--remove!!
}

并添加

.dropdown:hover .dropdown-content {
  display: block;
  margin-top: 65px; <- Add
}

Answer 2

如果您使用溢出：隐藏在您的#menu上，您的下拉列表将永远不会显示，因为您的列表将受到外部div的限制，因为它嵌套在。另外，使用margin-top在每个项目之间添加一些距离。

Answer 3

解决这个问题的方法是将定位从绝对更改为相对。还添加了一种定位方法

    .dropdown-content {
        display: none;
        position: absolute;<-- change to relative-->
        background-color: #f9f9f9;
        min-width: 160px;
        z-index: 1;

css定位中的下拉菜单项

3 个答案: