用 CSS 制作下拉菜单（有可能）？ [复制]答案

【问题标题】：Making drop down menus with CSS (Is is possible)? [duplicate]用 CSS 制作下拉菜单（有可能）？ [复制]
【发布时间】：2014-04-04 20:46:32
【问题描述】：

我想从屏幕顶部的一个简单菜单栏创建一个下拉菜单，就像您在 must Applications 中看到的一样。我认为这是可能的。在顶部，我有在屏幕上创建一个简单菜单栏的代码。

问题：如何仅使用 CSS 制作下拉菜单（就像您在大多数应用软件中看到的那样）？

我希望它能够将鼠标悬停在说 Item1 上，然后在列表下方有子项目。

我希望将菜单视为一个完整的下拉菜单，以便我可以通过 HTML 或 CSS 代码向其中添加菜单项。我的页面顶部我只是想成为一个菜单，以便用户可以点击某位作者，然后有一个可以查看特定作者的书籍列表。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Menu1</a></li>
<li><a href="#news">Menu2</a></li>
<li><a href="#contact">Menu3</a></li>
<li><a href="#about">Menu4</a></li>
</ul>

</body>
</html>

尝试制作下拉菜单：（这不起作用，它只会在原始菜单中添加更多内容）

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Menu1</a>  <-- not working
<ul>
<li><a href="#home">Menu1</a></li>
<li><a href="#news">Menu2</a></li>
<li><a href="#contact">Menu3</a></li>
<li><a href="#about">Menu4</a></li>
</ul>
</li>
<li><a href="#news">Menu2</a></li>
<li><a href="#contact">Menu3</a></li>
<li><a href="#about">Menu4</a></li>
</ul>

</body>
</html>

小提琴的工作代码：

我将这段代码放在这里，以便如果有人稍后出现，他们可以更好地参考某人提交的代码。

<ul>
    <li class="mainmenu"><a href="#home">Menu1</a> 
        <ul class="submenu">
        <li><a href="#home">Menu1</a></li>
        <li><a href="#news">Menu2</a></li>
        <li><a href="#contact">Menu3</a></li>
        <li><a href="#about">Menu4</a></li>
        </ul>
    </li>
    <li><a href="#news">Menu2</a></li>
    <li><a href="#contact">Menu3</a></li>
    <li><a href="#about">Menu4</a></li>
</ul>

CSS：

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
}
a {
    display:block;
    width:60px;
    background-color:#dddddd;
}
li ul{
    position:absolute;
    display:none;
}
li:hover ul{
    display:block;
}

【问题讨论】：

csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu
还有google.com/webhp?nord=1#nord=1&q=drop+down+menu+css，800 万条结果。
stackoverflow.com/questions/9953482/…
我喜欢这个问题。我不认为它完全是重复的。我认为这个问题是指一个非常简单的菜单，以便人们可以看到它是如何在 HTML 和 CSS 表之间完成的。有数百种精美的菜单可供使用，但从阅读的问题或至少我如何解释它来看，似乎个人在询问是否可以制作简单的菜单，并希望了解它是如何完成的更多的是简单的形式，而不是仅使用在网络上找到的形式。我喜欢这个问题并且也在使用小提琴的例子。

标签： javascript html css

【解决方案1】：

只需添加以下css

li ul{
position:absolute; // if you don't apply this it'll push the other menu items to right
display:none;
}

li:hover ul{
display:block;
}

检查这个JSFiddle

更新

如果您希望子菜单是垂直的，请删除 float:left for li 并添加以下内容

li {
display:inline-block;
}
li ul li{
display:block;
}

检查这个JSFiddle

【讨论】：

不如把它们水平放置而垂直放置呢？
@user3491862 已经添加，检查更新.. :)
如果您想将它们放在页面底部并让它们向上而不是向下怎么办。我是 CSS 新手？

【解决方案2】：

您想使用display:none; 将子菜单设置为隐藏

然后在主菜单中，悬停时，您希望使用 .mainmenu:hover .submenu {display:block;} 显示子菜单

试试这个 JSFiddle：http://jsfiddle.net/vLBsp/

【讨论】：

很好，如果您希望物品直接向下而不是穿过，我喜欢它。
就这样直截了当？ jsfiddle.net/vLBsp/1

【解决方案3】：

只需在标题下输入一个新的UL 并保持隐藏。悬停时，使其可见。这是一个例子：

<ul>
    <li><a href="index.php">index</a></li>
    <li><a href="faq.php">FAQ</a></li>
    <li>more services
          <ul>
                <li><a href="r.php">reseller</a></li>
                <li><a href="h.php">hosting</a></li>
          </ul>
    </li>
    <li><a href="contact.php">contact</a></li>
</ul>
<style>
     ul > li > ul{display:none;}
     ul > li:hover > ul{display:block;}
</style>

仅使用 CSS 和 HTML，您将无法在点击时执行此操作，只能在悬停时执行，就像上面的代码一样。

【讨论】：