修复下拉列表中的聚集列表 HTML/CSS

Question

我正在尝试制作一个下拉菜单，而我尝试制作的是，菜单中的列表项全部聚集在同一行中。我似乎无法弄清楚问题所在。我尝试更改显示属性、编辑边距和填充，但由于某种原因它似乎不起作用。如果有人能提供帮助，我将不胜感激。

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=”Cache-Control” content=”no-cache, no-store, must-revalidate”>
    <meta http-equiv=”Pragma” content=”no-cache”>
    <meta http-equiv=”Expires” content=”0”>
    <link rel="stylesheet" type="text/css" href="css/nav-style.css">
</head>

<body>
    <nav>
        <ul>
            <li>Home</li>
            <li class="dropdown-button">Forums


                <ul class="dropdown">
                    <li>Staff</li>
                    <li>Complaints</li>
                    <li>Applications</li>
                </ul>

            </li>
            <li>Store</li>
        </ul>

    </nav>
    <script>
        for(var i = 0;i<100;i++) {
            document.writeln("<br>");
        }

    </script>
</body>

CSS

nav {
    /* height: 70px; */
    background-color: rgb(66, 66, 66);
    z-index: 3;
    width: 100%;
    min-width: 236px;
}

nav > ul {
    display: inline-block;

    width: 100%;
    min-width: 240px;
    padding-left: 0;
}

nav > ul > li {
    display: inline-block;
    font-size: 2.2em;
    text-align: center;
    width: 33%;
    min-width: 150px;
    text-transform: uppercase;
}
nav > ul > li:hover {
    cursor: pointer;
}

nav > ul > li:after {
    top: 15px;
    content: '';
    display: block;
    border-bottom: 3px solid red;
    width: 100%;
    transform-origin: 50%;
    transform: scaleX(0);
    transition: transform 0.7s ease-in-out;
}

nav > ul > li:hover:after {
    transform: scaleX(1);
}

.dropdown li {
    position: absolute;
    font-size: 0.7em;
    display: block;
    width: 100%;
    text-transform: none;
    margin-right: 100%;
}

.dropdown {
    display: none;
    height: 100%;
}

.dropdown-button {
    height: 100%;
}

.dropdown-button:hover .dropdown {
    display: block;
}

我的代码 (Fiddle):
https://jsfiddle.net/6b4epg7a/

提前致谢！

Answer 1

您需要添加 position: 相对于下拉列表的父 li:

.dropdown-button {
    position: relative;
}

和 position:absolute 到子元素。

.dropdown {
    position: absolute;
    display: none
}

.dropdown li {
  line-height: 27px;
  font-size: 0.7em;
  text-transform: none;
  list-style: none;
}

检查 jsfiddle：https://jsfiddle.net/nza9gy8k/1/

要在 css 中了解有关定位的更多信息。检查 https://developer.mozilla.org/en-US/docs/Web/CSS/position

修复下拉列表中的聚集列表 HTML/CSS

Fix clustered list in dropdown HTML/CSS

html

css

cascadingdropdown

drop-down-menu

dropdown

HTML

CSS