很抱歉,如果这是一个愚蠢的问题,但我正在寻找向此导航栏添加元素下拉列表的方法。它位于 navbar.php
文件中,代码如下:
<link rel="stylesheet" href="/styles/navbar.css" type="text/css" /> <!-- navbar styles -->
<ul id="nav">
<li><a href="/index.php">Home</a></li>
<li><a href="/item1/">Item 1</a></li>
<li><a href="/item2/">Item 2</a></li>
<li><a href="/item3/">Item 3</a></li>
<li><a href="/item4/">Item 4</a></li>
</ul>
这是 navbar.css
文件:
#nav
{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #242424;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position:fixed;
top:0px;
}
#nav li
{
float: left;
}
#nav li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #7ACC01;
border-right: 1px solid #ccc;
}
#nav li a:hover
{
color: #c00;
background-color: #fff;
}
所以我的问题是,是否有一种简单的方法可以将元素的下拉列表添加到“元素 4”,例如,下拉菜单将在鼠标悬停时出现?
最佳答案
我希望您了解我们如何做到这一点,而不是给您鱼。有了鱼竿,你总能自己钓鱼。
看看我在这个 fiddle 里做了什么:
其实是这样的:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
您必须隐藏要切换的 ul
并在有人 悬停 时将其设置回可见。
PS:如您所见,我使用了HTML5
,这是推荐的,因为它是(更多)语义化的。
关于html - 如何向这个简单的导航栏添加下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22092684/