我正在尝试向我的“元素”菜单项添加下拉功能，如 [第 1/2/3 页] 所示。有没有一种有效的方法来做到这一点？ (如果适用，欢迎使用 jQuery 解决方案)
(出于某种原因，Projects 元素在 JSFiddle 中被拉伸(stretch)了，但无论如何它仍然有效)
<html>
<header id="header">
<div class="container">
<img src="<!--logo-->"/>
<nav id="nav">
<ul>
<li>
<a href="portfolio.html">Portfolio</a>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
</html>
1 :
最佳答案
使用 ul ul { display: none; 隐藏嵌套菜单} 并触发隐藏/嵌套的 ul 用 li:hover > ul { display: block; 。
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px;
font-family: helvetica, sans-serif;
}
#nav {
position: absolute;
right: 0;
top: -15px;
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
#header {
z-index: 2;
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
color: white;
}
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
/* unvisited link */
a:link {
color: blue;
}
/* visited link */
a:visited {
color: purple;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
}
#nav ul ul li {
float: none;
}
li:hover > ul {
display: block;
}<header id="header">
<div class="container">
<img src="<!--logo-->" alt="logo placeholder" />
<nav id="nav">
<ul>
<li>
<a href="portfolio.html">Portfolio</a>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="page1.html">Page 1</a>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>关于jquery - 尝试在现有导航栏上添加下拉项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42708602/