Tạo menu giống vnexpress

Menu giống Vnexpress

Menu giống vnexpress, menu dropdown vnexpress chỉ dùng css không cần javascript.

Demo Download

Bài viết này sẽ hướng dẫn bạn cách tạo một menu như vậy :

Bước 1:

Đối với blogger bạn thêm css trước ]]></b:skin>   (nhấn Ctrl + F để tìm)

<!-- htpp://www.erhay.com Nhiều thủ thuật hay hữu ích, thủ thuật blog,template vnexpress, facebook, design, truyện hay, themes S40, làm themes S40, cách cook firmware...,
 làm đồng hồ flash, tạo flash, khám phá,
và rất nhiều thông tin hữu ích có thể bạn sẽ cần htpp://www.erhay.com -->
body{font-family:helvertica,Arial,Sans;margin:0;padding:0;background:#f5f4f4;font-size:12px}
a:link,a:visited{color:#1f5602;text-decoration:none}
a:hover{color:#cf038e;text-decoration:underline;cursor:pointer}
img{border:0 none}
ul,ol{margin:0;padding:0;list-style-type:circle;}
#header h1{display:none}
.logo{margin: 28px 0px 0px 0px;width:410px;float:left}
.topadsright{float:right;margin:40px 0 0 10px}
.topnavi{z-index:99999;box-shadow:0 0 10px #777;background:#9c0206 ;position:fixed;top:0;left:0;right:0;padding:0 0 0 0}
.topnavi a{color:#eee;margin:0 8px 0 0;}
.top-menu{font-weight:bold;float:left;position:relative;font-size:12px;font-family:arial;color:#333;margin:0 0 0 0px}
.top-menu ul{margin:0;list-style:none;padding:0}
.top-menu ul li{padding:5px 0;float:left}
.top-menu ul li a{padding:0 12px 0 12px;border-left:1px solid #bd0106;border-right:1px solid #700104;color:#eee;margin:0}
.top-menu ul li.first a{border-left:0}
.top-menu ul li.last a{border-right:0}
.top-menu ul li a:hover{color:#eee}
.top-menu ul li.active{text-shadow:0 1px #fff;background:#dfe2e6;padding:5px 10px;margin-right:15px}
.top-menu ul li.active a{color:#000;border:0}
.top-menu ul li.active a:hover{color:#222}
#site-menu{margin:0 0 0;padding:0;position:relative;top:0;left:0}
.sf-navbar li:hover,.sf-navbar li.sfHover,.sf-navbar li li.current,.sf-navbar a:focus,.sf-navbar a:hover,.sf-navbar a:active{background-color:transparent !important}
.sf-menu li.active-trail ul,.sf-menu li.sfHover ul{top:26px}
#site-menu .sf-menu{border-top:1px solid #d8d9dd;background:url(http://goo.gl/aUZC6) repeat-x 0 -1px;width:100%;height:54px;padding:0 0 0px 0!important;margin:0!important}
#site-menu .sf-menu li{font-weight:bold;list-style-type:none;list-style-image:none;display:inline;background:transparent url(http://goo.gl/gecfY) no-repeat right 1px;padding:0}
#site-menu .sf-menu .menu li,#site-menu .sf-menu li.last{background:none}
#site-menu .sf-menu li:hover,#site-menu .sf-menu li.active-trail,#site-menu .sf-menu li.sfHover{border-left:0 #ccc solid;border-right:1px #ccc solid;margin:0 0}
#site-menu .sf-menu li a{color:#222;text-decoration:none;padding:7px 12px 7px}
#site-menu .sf-menu li:hover a,#site-menu .sf-menu li.active-trail a{background:url(http://goo.gl/dQGHP) repeat-x scroll 0 -14px transparent;}
#site-menu .sf-menu .menu{background:#eee;padding:0;width:100%;left:0}
#site-menu .sf-menu .menu li{font-weight:normal;border-right:none;border-left:none;padding:7px 0!important}
#site-menu .sf-menu .menu li:hover,#site-menu .sf-menu .menu li.active-trail,#site-menu .sf-menu .menu li.sfHover{padding:1px 2px 0 15px;margin:0 0 0 0}
#site-menu .sf-menu .menu li.active-trail{font-weight:bold}
#site-menu .sf-menu .menu li a{font-size:11px;padding:1px 2px 0 18px;background:url(http://goo.gl/Jh6UP) no-repeat scroll 8px 4px transparent}
#site-menu .sf-menu .menu li a:hover{color:#005dac}
.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu{line-height:1.0}
.sf-menu ul{position:absolute;top:-999em;width:10em}
.sf-menu ul li{width:100%}
.sf-menu li:hover{visibility:inherit}
.sf-menu li{float:left;position:relative}
.sf-menu a{display:block;position:relative}
.sf-menu li:hover ul,.sf-menu li.sfHover ul{left:0;top:26px;z-index:99}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:10em;top:0}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul{top:-999em}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul{left:10em;top:0}
.sf-navbar{height:10px;padding:0;position:relative}
.sf-navbar li{position:static}
.sf-navbar a{border-top:none}
.sf-navbar li ul{width:44em}
.sf-navbar li li{position:relative}
.sf-navbar li li ul{width:13em}
.sf-navbar li li li{width:100%}
.sf-navbar ul li{width:auto;float:left}
.sf-navbar a,.sf-navbar a:visited{border:none}
#search{width:211px;background:url(http://goo.gl/V28jx) no-repeat 0 0;border:0 solid #d4d4d4;display:inline;float:right;height:19px;margin:4px 4px 0 0}
#search input{float:left;background:none;width:180px;height:14px;padding:2px 5px;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-style:normal;color:#888;line-height:12px;border:none}
#search input:focus{background:#fffff0;border:1px solid #ccc}
#search input.submit{background:none;border:none;margin:2px 0 1px 0;padding:0;width:23px}
#related-older-href a:hover{color:#e76904}
.daymonth{float:right;margin:9px 25px 0 8px;color:#444;font-size:12px}
.numdate{color:#b6025f;font-weight:bold}

Bước 2:

Đặt code menu trong <body>

<h1><a href="http://www.erhay.com"> Erhay - Trang thông tin hay hữu ích - Góc suy ngẫm, tâm hồn, làm đẹp, khám phá thế giới, truyện - thủ thuật blogspot - điện thoại S40, làm theme, cook firmware - ôn thi đại học - download ebooks, software - tạo flash, flash trang trí, </a></h1>
<div id="site-menu">
<ul class="sf-menu sf-navbar">
<li class="first active-trail"><a class="active" href="http://www.erhay.com" target="" rel=""><img src="http://goo.gl/4tMfv"></a>
<ul class="menu">
<div id="search">
<form action="http://www.google.com.vn/search" method="get" target="blank">
<input check="checked" name="sitesearch" type="hidden" value="http://www.erhay.com/"><input class="text" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Nhập từ khóa tìm kiếm"><input class="submit" type="submit" value=""></form></div>
<div class="daymonth">Hôm nay: <script language="" type="text/javascript">/* <![CDATA[ */  
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('H c="P h O p o m q r u s l j".a(" "),9="e\\d f\\k,;2\\1 g,;2\\1 i,;2\\1 t\\v,;2\\1 N\\b,;2\\1 w\\I,;2\\1 B\\L,".a(";"),3=M G;5=3.F();8=9[3.z()];7>5&&(5+=7);x.A("<0 4=\'6\'>"+8+" </0>E\\D <0 4=\'6\'>"+3.J()+"</0> C\\y <0 4=\'6\'>"+c[3.K()]+"</0> n\\b <0 4=\'6\'>"+5+"</0>");',52,52,'span|u1ee9|Th|now|class|thisYear|numdate|1900|thisDay|dayNames|split|u0103m|monthNames|u1ee7|Ch|nh|Hai|02|Ba|12|u1eadt|11|06||05|04|07|08|10||09|u01b0|S|document|u00e1ng|getDay|write||th|u00e0y|ng|getYear|Date|var|u00e1u|getDate|getMonth|u1ea3y|new||03|01'.split('|'),0,{}))/* ]]> */</script><span class="numdate">Thứ Bảy, </span>ngày <span class="numdate">16</span> tháng <span class="numdate">03</span> năm <span class="numdate">2013</span>
</div>
</ul>
</li>
<li><a href="http://www.erhay.com" target="" rel="">Tin tức</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Trong nước</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Thế giới</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Công nghệ</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Thị trường</a></li>
</ul></li>
<li><a href="http://www.erhay.com" target="" rel="">Doanh nghiệp</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Thương mại điện tử</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Quảng cáo trực tuyến</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Đầu tư - Cạnh tranh</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Kinh doanh</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Doanh nhân</a></li>
</ul></li>
<li><a href="http://www.erhay.com" target="" rel="">Sản phẩm</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Điện thoại</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Máy tính</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Máy ảnh</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Màn hình</a></li>
</ul>
</li>
<li>
<a href="http://www.erhay.com" target="" rel="">Phần mềm</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Bảo mật</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Hệ điều hành</a></li>
<li><a href="http://www.erhay.com" target="" rel="">PM diệt virus</a></li>
<li><a href="http://www.erhay.com" target="" rel="">PM bản quyền</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Ứng dụng</a></li>
</ul></li>
<li><a href="http://www.erhay.com" target="" rel="">Viễn thông</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Tạp chí VT</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Thiết bị VT</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Ứng dụng VT</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Thị trường VT</a></li>
</ul>
</li>
<li><a href="http://www.erhay.com" target="" rel="">Khoa học</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Công nghệ mới</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Khoa học vũ trụ</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Khoa học công nghệ</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Phát minh khoa học</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Khoa học thiên nhiên</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Khoa học môi trường</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Khoa học ứng dụng</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Y học - Cuộc sống</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Khảo cổ học</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Bí ẩn khoa học</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Video khoa học</a></li>
</ul>
</li>
<li><a href="http://www.erhay.com" target="" rel="">Thủ thuật</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Thủ thuật máy tính</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Thủ thuật blog</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Thủ thuật yahoo</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Thủ thuật SEO</a></li>
</ul>
</li>
<li><a href="http://www.erhay.com" target="" rel="">Giải trí</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Góc hài ước</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Hình ảnh đẹp</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Tin tức điện ảnh</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Âm nhạc việt nam</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Âm nhạc quốc tế</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Hotgirl-Hotboy</a></li>
</ul>
</li>
<li><a href="http://www.erhay.com" target="" rel="">Game</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" target="" rel="">Gam di động</a></li>
<li><a href="http://www.erhay.com" target="" rel="">Game máy tính</a></li>
<li class="last"><a href="http://www.erhay.com" target="" rel="">Game trực tuyến</a></li>
</ul>
</li>
<li><a href="http://www.erhay.com" title="video" target="_blank" rel="_blank">Video</a>
<ul class="menu">
<li class="first"><a href="http://www.erhay.com" rel="_blank" target="_blank">Apple</a></li>
<li><a href="http://www.erhay.com" rel="_blank" target="_blank">Galaxy</a></li>
<li class="last"><a href="http://www.erhay.com" rel="_blank" target="_blank">Smartphone</a></li>
</ul>
</li>
<li><a href="#" target="" rel="">Sức khỏe</a>
<ul class="menu">
<li class="first"><a href="#" target="" rel=""></a></li>
<li><a href="#" target="" rel=""></a></li>
<li><a href="#" target="" rel=""></a></li>
<li><a href="#" target="" rel=""></a></li>
<li class="last"><a href="#" target="" rel=""></a></li>
</ul>
</li>
<li><a href="#" target="" rel="">Giáo dục</a>
<ul class="menu">
<li class="first"><a href="#" target="" rel=""></a></li>
<li><a href="#" target="" rel=""></a></li>
<li><a href="#" target="" rel=""></a></li>
<li><a href="#" target="" rel=""></a></li>
<li class="last"><a href="#" target="" rel=""></a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>