使用無序列表製作菜單？

Question

這可能是一個非常基本的問題，但我經過幾個小時的搜索找不到任何幫助，所以我發佈了它。

我想要使用無序列表來獲得像這樣的菜單。

在我的情況下，所有額外的列表項熄滅的div，所以我所有的浮動li元素到左側，但有新的問題。當底部沒有更多空間時，我希望李立在一邊，但即使底部有空間，他們也總是站在一邊。例如。在下面的圖像，我想「婦女」是下面不就在身邊「MEN」列表（「不要採取了錯誤的方式，如果你知道我的意思;））

所以誰能幫我

HTML

<div class="wrapper"> 
        <div class="list"> 
        <ul> 
         <li class=""> 
          <a href="#" class="heading">ELECTRONICS</a> 
          <ul><li> 
          <a href="#" class="item">Mobiles</a></li><li> 
          <a href="#" class="item">Tablets</a></li><li> 
          <a href="#" class="item">Laptops</a></li><li> 
          <a href="#" class="item">Network Components</a></li><li> 
          <a href="#" class="item">Computer Peripherals</a></li><li> 
          <a href="#" class="item">Mobile Accessories</a></li><li> 
          <a href="#" class="item">Television</a></li><li> 
          <a href="#" class="item">Home Appliences</a></li><li> 
          <a href="#" class="item">Kitchen Appliences</a></li><li> 
          <a href="#" class="item">Kitchen Appliences</a></li><li> 
          <a href="#" class="item">Gaming</a></li><li> 
          <a href="#" class="item">Cameras</a></li></ul> 
         </li> 
         <li> 
         <a href="#" class="heading">MEN</a> 
         <ul> 
          <li><a href="#" class="item">Clothing</a></li> 
          <li><a href="#" class="item">Footware</a></li> 
          <li><a href="#" class="item">Watches</a></li> 
          <li><a href="#" class="item">Accessories</a></li> 
          <li><a href="#" class="item">Spectacle Frames</a></li> 
          <li><a href="#" class="item">Bag, Belts & Wallets</a></li> 
          <li><a href="#" class="item">Sunglasses</a></li> 
          <li><a href="#" class="item">Fragrances</a></li> 
          <li><a href="#" class="item">Grooming & Wellness</a></li> 
         </ul> 
         </li> 
         <li> 
         <a href="#" class="heading">WOMEN</a> 
         </li> 
         <li>hello></li> 
         <li>hello></li> 
         <li>hello></li> 
         <li>hello></li> 
        </ul> 
        </div> 
       </div> 

CSS

 .wrapper { 
      display: 

none; 
     height: 400px; 
     width: 1266px; 
    } 
    .wrapper > di ul { 
     float: lft; 
} 
.wrapper div { 
    height: 100%; 
    width: 100%; 
    background-color: inherit; 
    padding-top: 30px; 
} 

.list a.heading { 
    font-size: 17px; 
    font-weight: bold; 
    padding-bottom: 10px; 
    padding-right: 10px; 
} 

.list a.item { 
    font-size: 15px; 
    font-family: raleway, sans-serif; 
    padding-left: 10px; 
    padding-top: 9px; 
    padding-right: 10px; 
} 

.list > ul > li { 
    float: left; 
} 

Answer 1

如果你看看HTMl，你會發現已經存在的列表存在於一個無序列表項中的無序列表中。但是，您的hello節點不在無序列表中，而是在常規列表項中。

將<ul>標籤添加到您的列表項目，使其工作，看看我的片段，看看如何。

.wrapper { 
 
    height: 400px; 
 
    width: 1266px; 
 
} 
 
.wrapper > div ul { 
 
    float: left; 
 
} 
 
.wrapper div { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: inherit; 
 
    padding-top: 30px; 
 
} 
 

 
.list a.heading { 
 
    font-size: 17px; 
 
    font-weight: bold; 
 
    padding-bottom: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
.list a.item { 
 
    font-size: 15px; 
 
    font-family: raleway, sans-serif; 
 
    padding-left: 10px; 
 
    padding-top: 9px; 
 
    padding-right: 10px; 
 
} 
 

 
.list > ul > li { 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <div class="list"> 
 
     <ul> 
 
      <li class=""> 
 
       <a href="#" class="heading">ELECTRONICS</a> 
 
       <ul><li> 
 
        <a href="#" class="item">Mobiles</a></li><li> 
 
        <a href="#" class="item">Tablets</a></li><li> 
 
        <a href="#" class="item">Laptops</a></li><li> 
 
        <a href="#" class="item">Network Components</a></li><li> 
 
        <a href="#" class="item">Computer Peripherals</a></li><li> 
 
        <a href="#" class="item">Mobile Accessories</a></li><li> 
 
        <a href="#" class="item">Television</a></li><li> 
 
        <a href="#" class="item">Home Appliences</a></li><li> 
 
        <a href="#" class="item">Kitchen Appliences</a></li><li> 
 
        <a href="#" class="item">Kitchen Appliences</a></li><li> 
 
        <a href="#" class="item">Gaming</a></li><li> 
 
        <a href="#" class="item">Cameras</a></li></ul> 
 
      </li> 
 
      <li> 
 
       <a href="#" class="heading">MEN</a> 
 
       <ul> 
 
        <li><a href="#" class="item">Clothing</a></li> 
 
        <li><a href="#" class="item">Footware</a></li> 
 
        <li><a href="#" class="item">Watches</a></li> 
 
        <li><a href="#" class="item">Accessories</a></li> 
 
        <li><a href="#" class="item">Spectacle Frames</a></li> 
 
        <li><a href="#" class="item">Bag, Belts & Wallets</a></li> 
 
        <li><a href="#" class="item">Sunglasses</a></li> 
 
        <li><a href="#" class="item">Fragrances</a></li> 
 
        <li><a href="#" class="item">Grooming & Wellness</a></li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#" class="heading">WOMEN</a> 
 
      </li> 
 
      <ul> <!-- <<<<<<<<<<< notice these <<<<<<<<<<<<<<<<<<< --> 
 
       <li>hello></li> 
 
       <li>hello></li> 
 
       <li>hello></li> 
 
       <li>hello></li> 
 
      </ul> <!-- <<<<<<<<<< notice these <<<<<<<<<<<<<<<<<<< --> 
 
     </ul> 
 
    </div> 
 
</div>