如何将下拉菜单添加到导航菜单

Question

我想以下拉菜单的形式将子菜单添加到我现有的导航菜单中。下面是我现有的 html 和 css 导航菜单代码。我希望当用户将鼠标悬停在它上面时它下拉。这是一个下拉菜单，当用户将鼠标移到元素上时出现。请我不希望你引用我的链接，我只希望你修改我的代码。宽腰带

.menu {
	border-bottom: 5px solid #00cc99;
}
.toggleMenu {
display:  none;
background: #666;
padding: 10px 15px;
width: 100%;
color: #fff;
}
.top-nav{
	 background: #339933;
}
.nav {
list-style: none;
*zoom: 1;
width:79%;
float:left;
}
.nav:before,
.nav:after {
content: " "; 
display: table; 
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
color: #FFF;
	font-size: 17px;	
}
.nav li.active> a, .nav li> a:hover {
	color:#FA6210; 
}
.nav li {
position: relative;
padding: 10px 70.5px;
	font-family: 'Open Sans', sans-serif;
}
.nav > li {
float: left;
}
.nav > li > a {
display: block;
}
.nav li  ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
-webkit-transition: background .2s linear;
	-moz-transition: background .2s linear;
	-ms-transition: background .2s linear;
	-o-transition:  background .2s linear;
	transition: background .2s linear;
}

<div class="menu">
		<div class="wrap">
			<div class="top-nav">
			      <ul class="nav">
		            <li class="active"><a href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact</a></li>
					<div class="clear"></div>
				 </ul>
				  
			</div>
	     </div>
	</div>

Answer 1

看看这个。我注意到您试图通过来回移动菜单来显示这一点。 您可以使用"display： none;"来实现您正在执行的操作，并在将父 li 元素悬停时将其设置为"display： block;"。

这是您的代码 - 我只注释掉了一些东西，并添加了其他一些东西。

.menu {
border-bottom: 5px solid #00cc99;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
width: 100%;
color: #fff;
}
.top-nav {
background: #339933;
}
.nav {
list-style: none;
*zoom: 1;
width: 79%;
float: left;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
color: #FFF;
font-size: 17px;
}
.nav li.active>a,
.nav li>a:hover {
color: #FA6210;
}
.nav li {
position: relative;
/* padding: 10px 70.5px; */
font-family: 'Open Sans', sans-serif;
}
.nav>li {
float: left;
}
.nav>li>a {
display: block;
}
.nav li ul {
position: absolute;
/* left: -9999px; */
}
.nav>li.hover>ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
.hidden {
display: none;
}
ul.nav li:hover .hidden {
display: block;
}

<div class="menu">
<div class="wrap">
<div class="top-nav">
<ul class="nav">
<li class="active"><a href="index.html">Home</a>
<div class="hidden">
<ul>
<li>Sample item #1</li>
<li>Sample item #2</li>
<li>Sample item #3</li>
</ul>
</div>
</li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>

Answer 2

像这样？

.menu {
	border-bottom: 5px solid #00cc99;
}
.toggleMenu {
display:  none;
background: #666;
padding: 10px 15px;
width: 100%;
color: #fff;
}
.top-nav{
	 background: #339933;
}
.nav {
list-style: none;
*zoom: 1;
width:79%;
float:left;
}
.nav:before,
.nav:after {
content: " "; 
display: table; 
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
color: #FFF;
	font-size: 17px;	
}
.nav li.active> a, .nav li> a:hover {
	color:#FA6210; 
}
.nav li {
position: relative;
padding: 10px 70.5px;
	font-family: 'Open Sans', sans-serif;
}
.nav > li {
float: left;
}
.nav > li > a {
display: block;
}
.nav li  ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
-webkit-transition: background .2s linear;
	-moz-transition: background .2s linear;
	-ms-transition: background .2s linear;
	-o-transition:  background .2s linear;
	transition: background .2s linear;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.active:hover .dropdown-content {
display: block;
}

<div class="menu">
		<div class="wrap">
			<div class="top-nav">
			      <ul class="nav">
		      <li class="active"><a href="index.html">Home</a>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</li>
					<li><a href="about.html">About</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact</a></li>
					<div class="clear"></div>
				 </ul>
				  
			</div>
	     </div>
	</div>

Answer 3

根据您的原始 CSS，您正在尝试打开父li:hover上的下拉列表，但是有一个拼写错误(li.hover( 表示当父<li>具有类.hover时，下拉列表将打开。

我修改了 HTML 以引入子菜单，下面是您的 HTML 和 CSS 的导航部分。

注意：一旦基本HTML设置为导航，您就可以继续使用链接的任何样式和格式。

小提琴：https://jsfiddle.net/2co53ts8/

.nav {
display: flex;
padding: 0;
}
.submenu {
position: absolute;
left: 0;
display: none;
}
.nav>li {
list-style: none;
position: relative;
padding: 10px;
}
.nav>li:hover ul {
display: block;
position: absolute;
left: 0;
padding-left: 0;
width: 300px;
/*define dropdown width*/
}
.nav>li:hover ul li {
list-style: none;
}

<ul class="nav">
<li class="active"><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="about.html">About</a>
<ul class="submenu">
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="about.html">About</a>
<ul class="submenu">
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a>
<ul class="submenu">
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul class="submenu">
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a>
<ul class="submenu">
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
</ul>