Hướng dẫn tạo thanh menu ngang có sổ dọc với phương pháp đơn giản nhanh dễ làm và hiệu quả cao!

BƯỚC 1 : CHÈN CODE CSS SAU VÀO KHUNG HTML :



#bottomnav{ width:1000px; margin:0 auto;padding:0;height:30px}
ul.menu{list-style-type:none; margin:0; padding:0;float:left}
ul.menu li{display:block; height:30px; float:left;position:relative;margin:0; padding:0}
ul.menu li:hover{background:#222;-moz-border-radius:5px;-webkit-border-radius:5px}
ul.menu li a{ display:block;float:left;text-decoration:none;font-size:14px;font-style:normal;font-weight:bold;padding:5px 10px;line-height:18px; text-transform:uppercase}
ul.menu li a span{font-weight:normal;padding-left:3px}
ul.menu li.drop a{padding-right:7px}
ul.menu li a:hover{border:none;color:#fff}
ul.menu li.drop:hover li{border:none}
ul.menu li.drop span.toggle{display:block;float:left; width:21px;height:26px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNRU5p8Vd4dWfnlZyMsqme8dKxN8wsQk7UGe4iXOBSZSTrZ9XIjbmidIAHfE-SRIa5Zjkr9-_-20OI5_bab8u0KXM85-SXO8exW7OmD78fFKorFklYECGFXCllkkN7xUS_OcIN59ae28/s1600/toggle.png) no-repeat 0 -20px; padding:0;margin:0 7px 0 0}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle{ background-position:1px 5px}
ul.menu li.drop:hover, ul.menu li.current:hover{ -moz-border-radius:0; -webkit-border-radius:0; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px}
ul.menu li.drop:hover ul{ display:block; z-index:1; padding-bottom:5px}
ul.menu li ul{ display:none; position:absolute; width:100%; top:30px; left:0; list-style-type:none; margin:0; padding:0; background:#fff}
ul.menu li ul li{ float:none; height:auto; margin:0; padding:0; border:none}
ul.menu li ul li a{ float:none; background:none; margin:0; padding:0; display:block; font-size:13px; height:auto; margin:0; padding:5px 13px; font-weight:bold; text-transform:none}
ul.menu li:hover ul{ border:none; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px}
ul.menu li:hover ul *{ background:none; -moz-border-radius:0; -webkit-border-radius:0; color:#555}
ul.menu li ul li:hover{ background-color:#f5f5f1}



BƯỚC 2 : CHÈN CODE HTML THANH MENU CHÍNH VÀO NƠI BẠN MUỐN HIỂN THỊ



<div id='bottomnav'>
<ul class='menu'>
<li class='drop'>
<a href='#'>Column Templates</a>
<span class='toggle'/>
<ul>
<li><a href='/'>1 Column Templates</a></li>

<li><a href='/'>2 Column Templates</a></li>
<li><a href='/'>3 Column Templates</a></li>
<li><a href='/'>4 Column Templates</a></li>
<li><a href='/'>2 Column On Top</a></li>
<li><a href='/'>3 Column On Top</a></li>
<li><a href='/'>2 Column Footer</a></li>
<li><a href='/'>3 Column Footer</a></li>
<li><a href='/'>4 Column Footer</a></li>
</ul>

</li>
<li class='drop'>
<a href='#'>Featured Templates</a>
<span class='toggle'/>
<ul>
<li><a href='/'>Ads Ready</a></li>
<li><a href='/'>SEO Friendly</a></li>
<li><a href='/'>DropDown Menu</a></li>
<li><a href='/'>Image SlideShow</a></li>
<li><a href='/'>Tab View Ready</a></li>
<li><a href='/'>Pagination Ready</a></li>

</ul>
</li>
<li class='drop'>
<a href='#'>Sidebar Templates</a>
<span class='toggle'/>
<ul>
<li><a href='/'>1 Right Sidebar</a></li>
<li><a href='/'>2 Right Sidebar</a></li>
<li><a href='/'>1 left Sidebar</a></li>
<li><a href='/'>2 Left Sidebar</a></li>
<li><a href='/'>Left and Right</a></li>

</ul>
</li>
<li class='drop'>
<a href='#'>Style Templates</a>
<span class='toggle'/>
<ul>
<li><a href='/'>Adapted WordPress</a></li>
<li><a href='/'>CSS To Blogger</a></li>
<li><a href='/'>PSD To Blogger</a></li>
<li><a href='/'>Magazine Style</a></li>
<li><a href='/'>Photo Blog</a></li>

<li><a href='/'>Gallery Templates</a></li>
<li><a href='/'>Entertainment</a></li>
<li><a href='/'>News Templates</a></li>
<li><a href='/'>Personal Templates</a></li>
<li><a href='/'>Porfolio Templates</a></li>
<li><a href='/'>Grunge Templates</a></li>
<li><a href='/'>Elegant Templatess</a></li>
<li><a href='/'>Simple Templates</a></li>
<li><a href='/'>Clean Templates</a></li>

<li><a href='/'>Sport Templates</a></li>
<li><a href='/'>Games Templates</a></li>
<li><a href='/'>Girly Templates</a></li>
</ul>
<li class='drop'>
<a href='#'>Color Templates</a>
<span class='toggle'/>
<ul>
<li><a href='/'>Black Template</a></li>
<li><a href='/'>Dark Template</a></li>
<li><a href='/'>White Templates</a></li>

<li><a href='/'>Gray Template</a></li>
<li><a href='/'>Creamy Templates</a></li>
<li><a href='/'>Red Templates</a></li>
<li><a href='/'>Blue Templates</a></li>
<li><a href='/'>Brown Templates</a></li>
<li><a href='/'>Green Templates</a></li>
<li><a href='/'>Yellow Templates</a></li>
</ul>
</li>
</li>

</ul>
</div>



CHÚC CÁC BẠN THÀNH CÔNG!

LƯU Ý : ĐÂY LÀ CODE BẢN QUYỀN NSVINA.COM
PHÁT LẠI GHI NGUỒN NSVINA.COM