Advertisement
Html/Css/Jquery

Membuat Horizontal Sub Drop Down Menu Dengan CSS

Apakah kamu pernah terpikirkan untuk membuat sub menu secara horizontal? bukan vertikal lagi. Seperti artikel sebelumnya membuat drop down menu dengan css, sebenarnya hal ini tidak jauh berbeda, akan tetapi saya hanya menggunakan script yang berbeda. Dari pada buang-buang waktu untuk mebahasnya mari langsung ke scriptnya.

Sisipkan code css pada file style css web yang kamu miliki.

.nav {
 display:table-cell;
 text-transform:uppercase;
 font-size:15px;
 z-index:800;
 padding-right:30px;
 position: relative;
 background:#000;
 font-family: Arial, Helvetica, sans-serif;
}
.nav li {
 float:left;
 list-style:none;
 z-index:500;
}
.nav li a {
 display:block;
 padding:8px 5px 0 5px;
 height:23px;
 text-decoration:none;
 color:#dedede;
 line-height:0px;
}

.nav li a:hover {
 color:#fff;
}
/*menghilangkan sub menu sebelum cursor diarahkan ke menu*/
.nav li ul {
 display: none;}
/* Untuk memunculkan sub menu secara horizontal*/
.nav li:hover ul, .nav li.hover ul {
 position: absolute;
 display: inline;
 background:#666;
 left: 0;
 margin: 0;
 padding: 0;
 font-size:13px;
 top:43px;
 margin-left:40px;
}
.nav li:hover li, .nav li.hover li {
 float: left; margin-left:10px; padding-right:10px;}
.nav li:hover li a, .nav li.hover li a {
 color: #dedede; line-height:12px;}
.nav li li a:hover {
 color: #fff;}

Berikut ini adalah file html yang saya gunakan, kamu bisa mengkombinasikannya atau mengubahnya sesuai kebutuh web yang sedang kamu bangun.

<div class="nav">
<ul>
<li><a href="http://pindexain.com">Home</a></li>
<li><a href="#">Tutorial</a>

<ul>
 <li><a href="http://www.pindexain.com/category/tech/internet/web/htmlcssjquery">HTML/CSS</a></li>
 <li><a href="http://www.pindexain.com/category/tech/internet/web/php-web">PHP</a></li>
 <li><a href="http://www.pindexain.com/category/tech/internet/wordpress">Wordpress</a></li>
 </ul>

</li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak Kami</a></li>
</ul>
</div>

Jika kamu mengalami kesulitan, silahkan tanyakan pada colom komentar, atau menghubungi twitter/facebook kamu, salam berbagi.

Download Code Demo

I Wayan Widyana

Selalu menganggap diri seorang pemula. Seorang Website Designer yang lagi suka nulis, juga editing video, dan memperhatikan tren desain. Entrepreneur. Co-Founder & CTO Pilar Kreatif Studio - Marketing & Editor Palawakia Studio

Related Stories

Leave a Reply

Your email address will not be published. Required fields are marked *