Beautiful CSS3 Drop Down Menu Preview Below:
CSS Code For This Beautiful Drop Down Menu
/* Beautiful Drop Down Menu By Ravisaive.in */
#catmenucontainer{ border-bottom: 1px solid #CCCCCC; width:1020px; margin:0 auto; height:26px; background-color:#333; display:block; padding:0 0 0 0; font:11px "tahoma",verdana,Arial,sans-serif; font-weight:normal}
#catmenu, #catmenu ul{height:26px; list-style:none outside none; margin:0; padding:0; width:1020px}
#catmenu a{color:#fff; display:block; border-right:2px solid #504A4B; font-weight:bold; padding:6px 4px 6px 6px; text-decoration:none}
#catmenu a:hover{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBkN5pGZEOR8iQ_O-QesoJJDkYnl-D8YcSlHlbReUai1AeEEPPsaw54y8OCStqCUy2tDTJH5PXui1xByre02ZP5Tutt5LXongZfxQrJY1wey-yg8RW8Fhb5n3MsxuUaIgJtLFFlx7S6c/s1600/menu-secondary-bg.png) left -134px repeat-x;outline:0}
#catmenu li{float:left; margin:0; padding:0}
#catmenu li li{background-color:#1F232F;float:left; margin:0 0 0 0; padding:0; width:130px}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited{background-color:#1F232F; width:135px; float:none; margin:0; padding:4px 5px 5px 10px; color:#E8EBEE; border-bottom:1px solid #504A4B; text-decoration:none}
#catmenu li li a:hover, #catmenu li li a:active{background-color:#222; width:135px; float:none; margin:0; padding:4px 5px 5px 10px; color:#FAAFBA; border-bottom:1px solid #504A4B}
#catmenu li ul{position:absolute; width:10em; left:-999em; z-index:1}
#catmenu li:hover ul{left:auto; display:block}
#catmenu li:hover ul, #catmenu li.sfhover ul{left:auto}
HTML Code For This Beautiful Drop Down Menu
<div id="catmenucontainer"> <div id="catmenu"> <ul> <li><a href="">Home <span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a> <ul class="children"> <li><a href="">Link 1<span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a></li> <li><a href="">Link 1.1</a></li> <li><a href="">Link 1.2</a></li> <li><a href="">Link 1.3</a></li></ul></li> <li><a href="">Link 2 <span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a> <ul class="children"> <li><a href="">Link 2.1</a></li> <li><a href="">Link 2.2</a></li> <li><a href="">Link 2.3</a></li> <li><a href="">Link 2.4</a></li></ul></li> <li><a href="">Link 3 <span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a> <ul class="children"> <li><a href="">Link 3.1</a></li> <li><a href="">Link 3.2</a></li> <li><a href="">Link 3.3</a></li> <li><a href="">Link 3.4</a></li></ul></li> <li><a href="">Link 4 <span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a> <ul class="children"> <li><a title="" target="_blank" href="">Link 4.1</a></li> <li><a title="" target="_blank" href="">Link 4.2</a></li> <li><a title="" target="_blank" href="">Link 4.3</a></li> <li><a title="" target="_blank" href="">Link 4.4</a></li> <li><a title="" target="_blank" href="">Link 4.5</a></li> <li><a title="" target="_blank" href="">Link 4.6</a></li></ul></li> <li><a href="">Link 5 <span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a> <ul class="children"> <li><a title="8" target="_blank" href="8">Link 5.1</a></li> <li><a title="" target="_blank" href="">Link 5.2</a></li> <li><a title="" target="_blank" href="">Link 5.3</a></li> </ul></li> <li><a href="">Link 6 <span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a> <ul class="children"> <li><a target="_blank" href="Mobile 128X128">Link 6.1</a></li> <li><a target="_blank" href="Mobile 128X160">Link 6.2</a></li> <li><a target="_blank" href="Mobile 176X208">Link 6.3</a></li> <li><a target="_blank" href="Mobile 176X220">Link 6.4</a></li> <li><a target="_blank" href="Mobile 208x208">Link 6.5</a></li></ul></li> <li><a href="">Link 7 <span style="font-weight: bold; color: rgb(0, 255, 255);">+</span></a></li> </ul> </div> </div>
