gfdcjhgvjhvbkjh

Bagaimana cara membuat sub menu horizontal

Melanjuti pembicaraan dari postingan saya sebelumnya yaitu bagaimana cara membuat menu horizontal. Dan pada point paling bawah pada postingan sebelumnya ada keterangan yang mana penjelasan tersebut seperti dibawah ini

Untuk membuat Submenu horizontal kita hanya memanfaatkan tag ul dan li sebagai acuan, dan tidak lepas dari CSS untuk mengaturnya agar cara kerja submenu tersebut berjalan dengan semestinya

Dan keterangan tersebut akan kita gunakan untuk sub menu horizontal ini, dan dibawah ini adalah keseluruhan dari HTML dan CSS di postingan sebelumnya

HTML

123456789    
<div class="mental">
<ul>
        <li><a href="#"​>Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Category</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

123456789101112131415161718192021222324252627282930.mental {
  width:100%;
  height:25px;
  background:orange;
}
.mental ul {
  margin: 0px;
  padding: 0px;
}
.mental li {
 color:black;
 float: left;
 list-style: none;
 margin:0;
 padding: 0px;
 background:orange;
}
.mental li a {
 display: block;
 color:black;
 text-decoration:none;
 padding: 2px 10px 2px 10px;
}
.mental li a:hover {
    color:BlueViolet;
    background:Lime;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Tahap pembuatan sub menu

---

Saya akan ambil sampel menu di bagian <li><a href="#">Category</a></li> yang nantinya akan menjadi induk dari anak menu (lihat kode atas dibagian menu horizontal yang saya beri warna merah) dengan catatan pindahkan terlebih dahulu penutup </li> dan taruh di akhir anak menu nantinya, contoh sampel dibawah

<li><a href="/">Category</a> <!-- penutup li harus dipindahkan di akhir anak menu-->

 <ul>

 <li><a href='#'>Yang </a></li>

 <li><a href='#'>Baca</a></li>

 <li><a href='#'>Orang Jelek</a></li>

 </ul>

</li> <!-- letak penutup li induk yang dipindahkan pada elemen penutup anak menu-->
Lihat tag penutup <li> berwarna biru di atas yang baru saja kita pindahkan di bawah penutup anak menu, untuk warna orange adalah anak menu dari induk Category.

Untuk kode keseluruhan submenu horizontal yang baru saja kita tambahkan dapat dilihat dibawah ini ;

1234567891011121314<div class='mental'>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href="#">Category</a>  <!--  penutup li harus dipindahkan di akhir anak menu-->
      <ul>
        <li><a href='#'>Kaya</a></li>
        <li><a href='#'>Miskin</a></li>
        <li><a href='#'>anda</a></li>
      </ul>
    </li>   <!-- letak penutup li induk yang dipindahkan pada elemen penutup anak menu-->
    <li><a href='#'>Contact</a></li>
  </ul>
</div>

Sampai disini kita baru saja membuat submenu horizontal, sehubung kita sama sekali belum mengatur selector CSS anak menu yaitu li ul, maka yang akan terjadi adalah seperti gambar dibawah ini