Question

我从互联网上获得了一些CSS和HTML代码，用于下拉菜单。看看下面的代码片段。它只有一个下拉菜单。我需要在下拉菜单中显示子菜单。请帮忙！

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: white;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

<ul>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">MENU</a>
<div class="dropdown-content">
<a href="#">menu 1</a>
 <a href="#">menu 2</a>  (need sub menu here)
 <a href="#">menu 3</a>
 </div>
 </li>
 </ul>

我在代码中提到过我需要子菜单的地方。任何帮助表示赞赏。提前致谢。

Answer 1

您好您可以按照以下代码，希望它可以帮助您

#nav {
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    text-align:center;
    color:blue;
    }

#nav li {
    display:inline-block;
    position:relative;
    float:left;
   
    }

#nav li a {
    display:inline-block;
    width:200px;
    line-height:35px;
    padding:0;
    text-decoration:none;
    color:blue;
    }
    
#nav li li {float:left; #006633;}
    
#nav li li a {display:block;font-size:12px;}
    


#nav ul {
    position:absolute;
    padding:0px;
    left:0;
    display:none;
    }

#nav li:hover ul ul {display:none;}
#nav li:hover ul {display:block;} 
#nav li li:hover ul {margin-left:100px; margin-top:-35px; display:block;}

<div id="menu">
    <ul id="nav">
       
        <li><a href="#"  >MENU</a>
            <ul>
                <li><a href="#" >menu 1</a></li>
                
                 <li><a href="#"  >sub menu</a>
                    <ul>
                        <li><a href="#"  >Sub menu 1</a>
                        <li><a href="#"  >Sub menu 2</a>
                    </ul>
                </li>
                <li><a href="#"  >menu 2</a></li>
               
               
            </ul>
        </li>
      
    </ul>
</div>

Answer 2

您可以在此处使用 CSS Flexbox ，这样可以更轻松地进行复制和播放对齐项目。

请查看下面的代码段：

.list {
  display: flex;
  background: #555;
}

.list li a:hover {
  background: #888;
}

.list li a:hover ~ .dropdown-content {
  display: flex;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown-content li a:hover {
  background-color: white;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  flex-direction: column;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content:hover {
  display: flex;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
/*   display: block; */
}

li.submenu:hover ul {
  display: flex;
}

.dropdown-content li {
  position: relative;
}

li.submenu ul {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

<ul class="list">
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">MENU</a>
    <ul class="dropdown-content">
      <li><a href="#">menu 1</a></li>
      <li><a href="#">menu 2</a></li>
      <li class="submenu">
        <a href="#">sub menu 3</a>
        <ul>
          <li><a href="">Sub menu link 1</a></li>
          <li><a href="">Sub menu link 2</a></li>
        </ul>
      </li>
      <li><a href="#">menu 3</a></li>
    </ul>
  </li>
</ul>

希望这有帮助！

在下拉菜单中需要帮助

2 个答案: