Cara membuat menu drop down pada website/blog

Pada postingan kali saya ingin coba berbagi kepada pengunjung tentang cara membuat menu drop down pada website/blog mungkin tutorial ini telah banyak yang serupa, namun saya tetap mencoba  memberikan tentang tutorial Cara membuat menu drop down pada website/blog berikut source code atau listing programnya :
1. Untuk listing kode html :
<div id="wrapper">
    <div id="navMenu">
    <ul style="height: 30px; width: 308px">
    <li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a>
    <ul>
    <li id="wrapper3"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    <li id="wrapper4"><a style="color:black" href="#">Products</a>
    <ul>
    <li id="wrapper3"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>

2. Untuk listing code CSS :

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#3A4956;
}
#navMenu ul li a{
    text-align:center;
    color:black;
    text-decoration:none;
    font-family:"Comic Sans MS";
    height:30px;
    width:150px;
    display:block;
    border-bottom:1px black solid;
}
#navMenu ul li a:hover{
    color:white;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
}
#navMenu ul li:hover ul{
    visibility:visible
}
#wrapper1{
    border-radius:8px 0 0 0;
    border-right:1px black solid

}
#wrapper4{
    border-radius:0 8px 0 0;
}

Berikut Hasil yang ditampilkan :