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

时间：2020-05-20 00:08:06

标签： html css

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

3 个答案:

答案 0 :(得分：0)

检查一下。我注意到您正在尝试通过前后移动菜单来显示此内容。 您可以使用“显示：无；”实现您正在执行的操作，并将其设置为“ display：block;”当父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>

答案 1 :(得分：-1)

喜欢吗？

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

答案 2 :(得分：-1)

根据您的原始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>

相关问题
最新问题