Question

我正在建立一个css下拉菜单，并且无法让子菜单显示在各自的父li元素下方。我已经尝试了一些针对类似问题提出的解决方案，但却未能让它们发挥作用。

这是我建立的菜单样本：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>

这就是css：

#menudiv {
text-align:center;
}

ul.menu {
list-style-type:none;
}

li.menuitem {
position:relative;
display:inline-block;
}

ul.submenu {
display:none;
position:absolute;
}

.menuitem:hover+ul.submenu {
display:block;
}

我可以通过向right:50px;添加ul.submenu之类的内容来移动子菜单，但会将所有子菜单移动到同一位置。

我在这里缺少什么？谢谢！

这里是Fiddle。

Answer 1

首先，以下标记结构：

<li class="menuitem">Aluminum</li>
<ul class="submenu">
   <li class="subitem">Round</li>
   <li class="subitem">Sheet</li>
   <li class="subitem">Plate</li>
</ul>

不正确。它应该是：

<li class="menuitem">Aluminum
   <ul class="submenu">
       <li class="subitem">Round</li>
       <li class="subitem">Sheet</li>
       <li class="subitem">Plate</li>
   </ul>
</li>

其次，您可以对ul，li元素使用CSS重置。为了简单起见，我使用过：

* {
    margin: 0;
    padding: 0;
}

现在，回答你的问题。需要更改以下类：

.menuitem:hover+ul.submenu {
   display:block;
}

到

.menuitem:hover > ul.submenu {
   display:block;
}

和

ul.submenu {
    display:none;
    position:absolute;
    top:0px;
    right:50px;
}

到

ul.submenu {
    display:none;
    position:absolute;
}

然后，您可以修改以下课程（以便子ul元素＆＃34;适合父母li}：

li.menuitem {
    position:relative;
    display:inline-block;
}

到

li.menuitem {
    position:relative;
    display:inline-block;
    padding: 5px 10px;
    margin: 0 10px;
}

总之，我想这就是你要找的东西：

＆＃13;

* {
    margin: 0;
    padding: 0;
}
#menudiv {
    text-align:center;
}
ul.menu {
    display: inline-block;
    list-style-type:none;
}
li.menuitem {
    position:relative;
    display:inline-block;
    padding: 5px 10px;
    margin: 0 10px;
}
ul.submenu {
    display:none;
    position:absolute;
}
.menuitem:hover > ul.submenu {
    display:block;
}

＆＃13;

<body>
    <div id="menudiv">
        <ul class="menu">
            <li class="menuitem">Aluminum
                <ul class="submenu">
                    <li class="subitem">Round</li>
                    <li class="subitem">Sheet</li>
                    <li class="subitem">Plate</li>
                </ul>
            </li>
            <li class="menuitem">Copper
                <ul class="submenu">
                    <li class="subitem">Round 2</li>
                    <li class="subitem">Sheet 2</li>
                </ul>
                <li class="menuitem">Steel</li>
        </ul>
    </div>
</body>

＆＃13;

希望这有帮助!!!

Answer 2

尝试将<ul class="submenu">置于<li class="menuitem">内。然后将<li>设置为position:relative;并将<ul>设置为position:absolute;left:0;。这会将<ul>相对于其父元素<li>。

定位

这是一个代码示例：http://codepen.io/anon/pen/WQdMjX

Answer 3

您的标记对于嵌套子列表不正确。

你这样做：

<ul>
    <li>text</li><!-- incorrect, don't close li here -->
    <ul>
        <li>sub</li>
    </ul>
    </li><!-- correct, though li is already closed -->
    <li>text</li><!-- incorrect, don't close li here -->
    <ul>
        <li>sub</li>
    </ul>
    <!-- needs closing li here -->
    <li>text</li>
</ul>

而是这样做：

<ul>
    <li>text 
        <ul>
            <li>sub</li>
        </ul>
    </li>
</ul>

然后将CSS选择器从.menuitem:hover + ul.submenu更新为.menuitem:hover > ul.submenu，因为您不再选择兄弟元素（+），而是选择子元素（>）

您需要从这里微调子菜单的位置，但这应该可以让您到达目的地。

Answer 4

请记住，在开发菜单时，您需要确保链接内容位于锚标记内，包括启动子窗体的顶级导航中的链接。这样，这些链接本身就是可以关注的。您希望能够通过键盘访问这些菜单元素，因为许多关节炎，帕金森病等可能无法使用鼠标（并且您不想使用tabindex来模仿这个行为，因为屏幕阅读器将寻找锚标签。）

昨天有类似的StackOverflow问题：Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?

Answer 5

在正常情况下，您也可以使用Bootstrap Dropdown CSS。

如何使下拉子菜单直接显示在其父<li>下方？

5 个答案: