Sırasız listeyi kullanarak bir menü yapmak mı?

Question

Çok basit bir soru olabilir, ancak arama yaptığımdan sonra google'da herhangi bir yardım bulamıyorum, bu yüzden yayınladım.

Sırasız liste kullanarak böyle bir menü almak istiyorum.

Benim durumumda

tüm ekstra liste öğesi div dışına gider, bu yüzden sola tüm li unsurları süzülüyor ama yeni bir sorun yoktur. Altta daha fazla yer kalmadığında li'nin gitmesini istiyorum, ancak altta yer olsa bile her zaman yanlarındadırlar. Örneğin için.

Yani can); aşağıdaki resimde i "KADIN" değil tarafta "MEN" listesinin altında olmasını istediğiniz (ne demek istediğimi biliyorum 'yanlış anladı almayın) herkes bana

HTML yardım

<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'ye bakarsanız, halihazırda var olan listelerin, sırasız bir liste öğesinin içindeki sırasız bir listeden var olduğunu görürsünüz. Ancak, hello düğümleriniz, sıralanmamış bir listede değil, normal liste öğelerinde yer aldı.

Çalıştırmak için liste öğelerinize <ul> etiket ekleyin, nasıl görüneceğini görmek için snippet'ime bakın.

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