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

debugcn 发表于 Dev

凯伦

我正在构建一个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移动子菜单，但这会将所有子菜单移动到同一位置。

我在这里想念什么？谢谢！！

这是小提琴。

萨特维克·纳德卡尼（Satwik Nadkarny）

首先，以下标记结构：

<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>

其次，你可以使用一个CSS复位ul，li元素。为了简单起见，我使用了：

* {
    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元素“适合”父元素li）：

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

到

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

总而言之，我想这就是您要寻找的东西：

* {
    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;
}

<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>

希望这可以帮助！！！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。