[Code] Share code Menu với style mới!!

Mới rip anh em dùng nh1e ~> thấy ngon thì vote +1


Demo: http://www.noiloiyeuthuong.com/h23-menu



HD: Chèn vào chỗ nào tùy bạn thích (VD: Overall_Body, Overall_Head,...)

Code:

 

 


[font=Courier New]<style type="text/css">
#menu_click{
width: 100%;
margin: 0 auto;
background: url("http://[/font][url=http://www.blogblog.com/1kt/transparent/black50.png%22)][font=Courier New][color=#666666]www.blogblog.com/1kt/transparent/black50.png")[/color][/font][/url][font=Courier New] repeat scroll left top transparent;
}
#menu{
border-radius:5px;
border-color:#FFFFFF;
border-width:2px 2px 2px 10px;
color:#000000;
font-weight:700;
margin:0px auto 10px auto;
padding:10px 7px;
text-align:center;
width: 810px;
}

#menu ul{
list-style: none;
}

#menu ul li {
position: relative;
float: left;
}

#menu li a {
display: block;
color: white;
font-weight: bold;
text-decoration: none;
padding: .3em 6px;
}
#menu li a:hover {
color: white;
background: orange;
}
#menu li ul{
position: absolute;
display: none;
width: 163px;
margin-left:5px;
padding: 0px;
}
#menu li:hover ul{
display: block;
}
#menu ul li ul li {
background: #0C7341;
border: 1px solid white;
width: 100%;
-moz-border-radius: 5px 5px 5px 5px;
}


#menu .mho_so {
    -moz-border-radius: 5px 5px 5px 5px;
    background: url("http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/12855235301715406732.jpg") repeat scroll 0 0 #327DD7;
    border-width: 2px 2px 2px 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    margin: 0 5px;
    padding: 10px 7px;
    text-align: center;
    width: 120px;
}

#menu .mlien_ket {
    -moz-border-radius: 5px 5px 5px 5px;
    background: url("http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/128552277380383065.jpg") repeat scroll 0 0 #327DD7;
    border-width: 2px 2px 2px 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    margin: 0 5px;
    padding: 10px 7px;
    text-align: center;
    width: 120px;
}
#menu .mbai_gui {
    -moz-border-radius: 5px 5px 5px 5px;
    background: url("http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/1285522773243872274.jpg") repeat scroll 0 0 #327DD7;
    border-width: 2px 2px 2px 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    margin: 0 5px;
    padding: 10px 7px;
    text-align: center;
    width: 120px;
}
#menu .mtim_kiem {
    -moz-border-radius: 5px 5px 5px 5px;
    background: url("http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/1285522773638371976.jpg") repeat scroll 0 0 #327DD7;
    border-width: 2px 2px 2px 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    margin: 0 5px;
    padding: 10px 7px;
    text-align: center;
    width: 120px;
}


#menu .home {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#327DD7 url(http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/1285522774191404211.jpg) repeat scroll 0 0;
border-width:2px 2px 2px 0;
color:#FFFFFF;
font-size:13px;
font-weight:700;
margin:0 5px;
padding:10px 7px;
text-align:center;
width:120px;
}

#menu .ho_so {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#327DD7 url(http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/12855235301715406732.jpg) repeat scroll 0 0;
border-width:2px 2px 2px 0;
color:#FFFFFF;
font-size:13px;
font-weight:700;
margin:0 5px;
padding:10px 7px;
text-align:center;
width:150px;
}

#menu .dang_ky {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#327DD7 url(http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/12855235301715406732.jpg) repeat scroll 0 0;
border-width:2px 2px 2px 0;
color:#FFFFFF;
font-size:13px;
font-weight:700;
margin:0 5px;
padding:10px 7px;
text-align:center;
width:120px;
}

#menu .lien_ket {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#327DD7 url(http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/128552277380383065.jpg) repeat scroll 0 0;
border-width:2px 2px 2px 0;
color:#FFFFFF;
font-size:13px;
font-weight:700;
margin:0 5px;
padding:10px 7px;
text-align:center;
width:150px;
}
#menu .bai_gui {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#327DD7 url(http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/1285522773243872274.jpg) repeat scroll 0 0;
border-width:2px 2px 2px 0;
color:#FFFFFF;
font-size:13px;
font-weight:700;
margin:0 5px;
padding:10px 7px;
text-align:center;
width:150px;
}

#menu .home, #menu .lien_ket{
color: #fff;
}

#menu .ho_so,#menu .dang_ky, #menu .bai_gui, #menu .tim_kiem{
color: #000;
}
/* Menu blank */
#menu ul li a:hover{
background:#FFFFFF url(http://img1-photo.apps.zing.vn/upload/original/2010/09/27/0/1285522774294677702.jpg) repeat scroll 0 0;
color:#000000;
}
.clear{
clear: both;
}
</style>
<div id="menu_click"><div id="menu">
<ul>
    <li><a href="/forum" class="home">Home</a></li>

    <li>
        <a class="dang_ky" href="/register" rel="nofollow">Đăng kí</a>
       
    </li>
    <li>
       
                  <a class="lien_ket">Liên kết nhanh</a>
                  <ul class="popupbody popuphover">
                    <li><a href="/memberlist">Danh sách thành viên</a></li>

                  </ul> 
     
    </li>
    <li><a href="/search?search_id=newposts" class="bai_gui">Bài gửi hôm nay</a></li>
</ul><div class="clear"></div>[/font]