Question

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

我是CSS的新手，想创建一个导航栏。当我单击“服装”部分时，出现“女孩”部分。但是当我单击“女孩”部分时，子项不会显示。当我将鼠标悬停在“女孩”部分时，我想显示菜单项。有人可以帮我这个忙吗？我无法弄清楚。

Answer 1

请尝试使用此代码

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

Answer 2

您现在忘记了进入子菜单类。子菜单也忘记了显示：block;请尝试遵循以下代码以获得良好的设计。

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

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

2 个答案: