Tạo menu giống zing mp3

Tạo menu giống zing mp3, cach tao menu giong mp3.zing

Menu giống Zing Mp3

DEMO   DOWNLOAD

Hôm nay mình xin hướng dẫn với mọi người cách làm menu giống trong mp3.zing.vn

Đặc điểm menu mình sẽ giới thiệu dưới đây:

- Nhẹ
- Chỉ sử dụng CSS, làm sub menu rất thủ công.
- Khó tùy biến do không dùng js, tuy vậy nó cũng rất dễ chỉnh sửa với những ai thạo css.
- Dễ dàng dùng trên blogger.

Tải menu (password: erhay)

Cách thêm vào blogger:

Bước 1:

Copy code css đặt trước :    ]]></skin>

body{background:#3E3E3E;; margin:0 auto; margin: 40px 0px 0px 0px}
#erhay-menu ul {list-style: none;}
ul#erhaynav {
float: left;
width: 100%;
position: relative;
background: url(http://static.mp3.zdn.vn/skins/mp3_version3_05/images/vline.jpg);
background-repeat: repeat-x;
background-position: 100px -61px;
margin:0 auto;
}
ul#erhaynav li {
padding:0px 7px;
float: left;
height: 35px;
background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right;
}
ul#erhaynav li a {
padding: 7px 15px;
display: block;
color: #474747;
font-weight:bold;
text-shadow:0 1px 0 #fff;
text-decoration: none;
}
ul#erhaynav li:hover {
padding: 0 5px!important;
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
background-color: white;
}
ul#erhaynav li.erhay-home {
background: url(http://static.mp3.zdn.vn/skins/mp3_version3_05/images/icon-8.png);
width: 25px;
background-position: 0px -5px;
}
ul#erhaynav li.erhay-home:hover
{
border:none !important;
}
ul#erhaynav li.erhay-home a {height:19px;}
ul#erhaynav li div.submenu {
position: absolute;
top: 39px;
background: #ff7d00;
padding:5px;
display: none;
border-right:4px solid #0082ff;
border-left:4px solid #0082ff;
border-bottom:4px solid #0082ff;
color:#fff;
}
ul#erhaynav li:hover div.submenu {display: block;}
ul#erhaynav li div.subsub {width:480px;left: 80px; margin-top:-4px; padding: 1px;
border: 1px solid #dbdbdb;
background-color: #fff; position:absolute;}
ul#erhaynav li div.subsub a{color:#474747; font-weight:normal}
.left1{width:159px; float:left; border-right:1px solid #ebebeb}
.submenuleft1{width:159px; padding: 2px 0;border-bottom: 1px solid #ebebeb;background-color: #f5f5f5;color: #333;text-align: center;
font-size: 12px;
line-height: normal;}
.submenuleft1 a{font-size:14px; color:#333; font-weight:bold !important;}
.submenuleft1content{border-bottom:1px solid #ebebeb}
.submenuleft1content:hover{background:#7B4696;}
.submenuleft1content a:hover{color:white !important}

Bước 2:

Đặt menu vị trí bạn muốn, code html:

<div id="erhay-menu">
<ul id="erhaynav">
<li class="erhay-home"><a href="http://www.erhay.com"></a></li>
<li><a href="http://www.erhay.com">Erhay</a>
<div class="submenu subsub">
<div class="left1">
<div class="submenuleft1"><a href="http://www.erhay.com">Bài hát</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Việt Nam</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Âu Mỹ</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Hàn Quốc</a></div>
</div>
<div class="left1">
<div class="submenuleft1"><a href="http://www.erhay.com">Bài hát</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Việt Nam</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Âu Mỹ</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Hàn Quốc</a></div>
</div>
<div class="left1">
<div class="submenuleft1"><a href="http://www.erhay.com">Bài hát</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Việt Nam</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Âu Mỹ</a></div>
<div class="submenuleft1content"><a href="http://www.erhay.com">Hàn Quốc</a></div>
</div>
</div>
</li>
<li><a href="http://www.erhay.com">Video</a>
</li>
<li><a href="http://www.erhay.com">Nghệ sĩ</a></li>
<li><a href="http://www.erhay.com">About</a>
</li>
</ul>
</div>

(Vui lòng ghi lại nguồn http://www.erhay.com khi phát hành lại thông tin từ trang này)