Membuat Menu Drop Down Blog Sederhana

Bagi blog teman-teman yang membutuh kan menu drop down dapat mencoba tutorial ini, walaupun sederhana,seandainya anda jago script,pasti bisa anda buat lebih bagus lagi.
Script ini hanya membutuh kan 2 type, yaitu HTML dan CSS.

HTML

<nav>
    <ul>
        <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li>
            <a href="#">Category</a>
            <ul>
                <li><a href="">Products 1</a></li>
                    <li><a href="">Category 2</a></li>
                    <li><a href="">Category 3</a></li>
                    <li><a href="">Category 4</a></li>
                    <li><a href="">Category 5</a></li>
                </ul>
            </li>
            <li><a href="#">Sitemap</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>

CSS

* {margin:0; padding:0;}

body {
background-color:#333;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}

nav {
background-color:#900; 
height:50px; 
line-height:50px; 
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}

nav ul {
list-style:none;
}
nav ul li a {
float:left; 
width:150px; 
display:block; 
text-align:center; 
color:#FFF; 
text-decoration:none; 
text-transform:uppercase;
}

nav ul li a:hover {
background-color:#666; 
display:block;
}

nav ul li:hover ul {
display:block;
}
nav ul ul {
display:none; 
list-style:none; 
position:absolute; 
background-color:#900;
left:300px; 
top:50px; 
width:190px;
}

nav ul ul li a {
float:none; 
display:block; 
padding-left:30px; 
text-align:left; 
width:160px;
}

nav ul ul li a:hover {
color:#990;
}

Berikut ini adalah hasil nya :

Selamat meencoba ya teman-teman

Dadang Kurnia

Hanya seorang Nubie, Memulai blog Sebagai Hobby.

Share this post