Membuat Lebar Sub Menu Full - Width 100%

Full Width Sub Menu - Selamat malam blogger, kali ini saya kana bagi-bagi modifikasi menu full width. Dengan CSS ini, kita akan bisa membuat lebar sub menu full menyesuaikan lebar keseluruhan navigasi. Jika biasanya lebar submenu mengikuti, menu di atasnya, maka kali ini lebarnya mengikuti lebar navigasi. Perbedaannya ada pada gambar berikut ini:

 Navigasi biasa tidak full width

Navigasi submenu full-width

Nah, untuk membuatnya sangat mudah. Tutorialnya kapan-kapan, sekarang langsung saya bagi yang sudah mateng saja ya :D.
Berikut CSS nya, silahkan Anda tambahkan di atas ]]></b:skin>

#primary-nav {margin: auto;text-align: center;width: 780px;position:relative;}
#primary-nav ul {font-size: 11px;list-style: none outside none;margin: 0;padding: 0;}
#primary-nav ul a {color: #000;font-family: arial black;text-transform: uppercase;}
#primary-nav ul li {float: left;height: 20px;margin-top: 5px;padding-bottom: 0;padding-left: 0;padding-right: 0;z-index: 40;}
#primary-nav ul li:hover {visibility: inherit;background: none repeat scroll 0 0 #FFFFFF;}
#primary-nav ul ul {position: absolute;width: 250px;}
#primary-nav ul ul li {border-bottom: 1px solid #CCCCCC;float: left;margin-right: 10px;text-align: left;width: 250px;}
#primary-nav ul li:hover ul, #primary-nav ul li.sfHover ul {left: -1px;top: 36px;z-index: 99;}
#primary-nav ul a {color: #000;margin: 0;padding-left: 10px;padding-right: 10px;}
#primary-nav ul a:hover {color: #000;}
#primary-nav ul ul {background: none repeat scroll 0 0 #FFFFFF;padding-bottom: 5px;padding-left: 8px;left: 0;margin-top: -13px;right: 0;top: -9999em;width: 100%;}
#primary-nav ul ul li {background: none repeat scroll 0 0 #FFFFFF;float: left;height: 20px;}
#primary-nav ul ul li:hover {background: #000;color: #ffffff;}
#primary-nav ul ul a:hover {color: #fff;}
#primary-nav ul ul li:last-child {border-bottom: medium none;}

Dan berikut HTML nya, silahkan Anda letakkan di bagian yang Anda suka dari template Anda. Atau cara mudahnya silahkan tambahkan ke dalam GADGET HTML (Tata Letak > Add Gadget > HTML Gadget

<div id="primary-nav">
<ul>
<li><a href="#">Menu1</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul></li>
<li><a href="#">Menu2</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul></li>
<li><a href="#">Menu3</a>
<ul class="sub-menu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul></li>
</ul>
</div>

Selamat Mencoba. Semoga berhasil.

Item Description: Membuat Lebar Sub Menu Full - Width 100%