Question

我想从屏幕顶部的简单菜单栏创建DropDown菜单，就像您在必须的应用程序中看到的那样。我认为这是可能的。在顶部，我有一个代码，可以在屏幕上显示一个简单的菜单栏。

问题：如何仅在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;
}

Answer 1

您想要使用display:none;

将子菜单设置为隐藏

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

显示该子菜单

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

Answer 2

只需在标题下输入一个新的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，您无法在点击时执行此操作，只能在悬停时执行此操作，就像在上面的代码中一样。

Answer 3

只需添加以下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的{{1}}并添加以下内容

li

检查此JSFiddle

使用CSS制作下拉菜单（可以）吗？

3 个答案: