时间戳

首页 > 解决方案 > 如何将下拉菜单添加到导航菜单

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

问题描述

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

标签： htmlcss

解决方案

看一下这个。我注意到您试图通过来回移动菜单来显示这一点。您可以使用“显示：无；” 实现你正在做的事情，并将其设置为“显示：块；” 当父 li 元素悬停时。

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

.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>

推荐阅读