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

【问题标题】：how to add dropdown to navigation menu如何将下拉菜单添加到导航菜单
【发布时间】：2020-09-06 05:13:08
【问题描述】：

我想以下拉菜单的形式将子菜单添加到我现有的导航菜单中。下面是我现有的 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>

【问题讨论】：

• 将.nav > li.hover > ul 更改为.nav > li:hover > ul。还要在每个父
• 中添加额外的<ul><li>..</li></ul>，因为您的 CSS 已经涵盖了子元素在悬停时可见的代码。