代码之家 › 专栏 › 技术社区 › Sajjad Tabreez

导航中无法呈现的子菜单项

css html

Sajjad Tabreez · 技术社区 · 7 年前

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;
  
}

.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.header:hover .dropbtn {
  background-color: #00b5cc;
}


.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: 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 li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.header:hover .dropdown-content {
  display: block;
}

.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.sub-menu{
  list-style-type: none;
  display:none;
}

.dropdown-content:hover .submenu{
 background-color: red;
}

<ul class="header">
<li>
    <a class="dropbtn ">
    Apparel
    </a>  
    <ul class="dropdown-content">
    <li>
         <a>Girls
             <ul class="sub-menu">
         <li><a>Shoes</a></li>
         <li><a>Pants</a></li>
         <li><a>Skirts</a></li>
         <li><a>Tops</a></li>
         </ul>
         </a>
         </li>
   </ul>
       
</li> 
</ul>

2 回复 | 直到 7 年前

Dharmesh Vekariya 7 年前

你忘了现在冲进子菜单类。子菜单也忘了显示:块;请尝试以下代码为好的设计。

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;      
}
.header ul {
  padding: 0;
}
.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
  display: inline-block;
}
.header:hover .dropbtn {
  background-color: #00b5cc;
}
.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: 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 li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content li a:hover {
  background-color: #ddd;
}
.header:hover .dropdown-content {
  display: block;
}
.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}
.sub-menu{
  list-style-type: none;
  display:none;
}
.dropdown-content:hover .sub-menu{
 background-color: red;
 display: block;
}

<ul class="header">
  <li>
    <a class="dropbtn ">Apparel</a>  
    <ul class="dropdown-content">
      <li>
        <a>Girls</a>
          <ul class="sub-menu">
            <li><a>Shoes</a></li>
            <li><a>Pants</a></li>
            <li><a>Skirts</a></li>
            <li><a>Tops</a></li>
          </ul>            
      </li>
    </ul>
  </li>
</ul>

iPraxa Inc 7 年前

.header{
  display:inline-block;
  vertical-align: top;
  list-style-type: none;

}

.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.header:hover .dropbtn {
  background-color: #00b5cc;
}


.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  list-style-type: 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 li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.header:hover .dropdown-content {
  display: block;
}

.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.sub-menu{
  list-style-type: none;
  display:none;
}

.dropdown-content:hover .submenu{
 background-color: red;
}
.dropdown-content li:hover .sub-menu { display: block; }

HTML格式:-

<ul class="header">
<li>
    <a class="dropbtn ">
    Apparel
    </a>  
    <ul class="dropdown-content">
    <li>
         <a>Girls</a>
             <ul class="sub-menu">
         <li><a>Shoes</a></li>
         <li><a>Pants</a></li>
         <li><a>Skirts</a></li>
         <li><a>Tops</a></li>
         </ul>

         </li>
   </ul>

</li> 
</ul>