Dropdown menu với CSS và CSS3

  Hôm nay mình giới thiệu cho mọi người một thanh menu đa cấp chỉ sử dụng CSS mà không cần hình ảnh. Giúp cho blog load nhanh hơn, chuyên nghiệp hơn.




 

  DEMO 

Các bước thực hiện:

• Vào Mẫu  >>   Chỉnh sửa HTML 

• Chèn code sau vào trước thẻ ]]></b:skin>

.CW-menu,
.CW-menu ul a:hover,
.CW-menu ul .current a, .CW-menu ul li:hover > a
{
 background: #0B66BA !important;
 background: -moz-linear-gradient(top,  #77BAF7 0%, #2692F2 3%, #0B66BA 100%) !important;
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #77BAF7 ), color-stop(0.03, #2692F2), color-stop(1, #0B66BA)) !important; 
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2692F2', endColorstr='#0B66BA') !important; 

 color: #FFF !important; 
 border-radius: 6px !important;
 border: solid 1px #0C65B6 !important;
 -webkit-border-radius: 6px !important;
 -moz-border-radius: 6px !important;
}
}
.CW-menu 
{
 font-size: 13px;
 line-height: 100%; 
 padding: 8px 10px 2px;
 margin: 0;
 -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
 -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}

.CW-menu li 
{
 list-style: none;
 padding: 5px 5px;
 margin: 0 5px;
 float: left;

 position: relative;
}

.CW-menu a 
{
 font-weight: bold;
 color: #FFF;
 text-decoration: none;
 outline: none !important;
 display: block;
 padding:  8px 10px;
 margin: 0;
 
 border: 1px solid transparent;
 
 border-radius: 7px;
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 
 text-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
}

.CW-menu li.hasSubNav a
{ 
 border-radius: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 
 -webkit-border-top-left-radius: 4px;
 -webkit-border-top-right-radius: 4px;
 -moz-border-radius-topleft: 4px;
 -moz-border-radius-topright: 4px;
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
}

 .CW-menu li.hasArrow a { padding-right: 2.25em;
}


 
.CW-menu .current a, .CW-menu li:hover > a
{
 background: #EEE;
 background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
 background: -moz-linear-gradient(top,  #FFF 0%, #EEEEEE 100%);

 display: block; 
  
 color: #444;
 
 cursor: pointer !important;
 
 border: solid 1px #b4b4b4;
 
 text-shadow: 0 1px 1px rgba(0, 0, 0, .1); 
}

.CW-menu li:hover > ul { display: block !important; }

.CW-menu ul 
{
 background: #EEE;
 background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DDDDDD));
 background: -moz-linear-gradient(top,  #eee,  #ddd);
 /* filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#DDDDDD'); */
 
 width: 175px;
 display: none;
 padding: .5em 5px;
 margin: 0;
 position: absolute;
 top: 42px;
 left: 5px;
 border: solid 1px #b4b4b4;
 border-top: none;
 
 -webkit-border-radius: 6px;
 -webkit-border-top-left-radius: 0;
 -moz-border-radius: 6px;
 -moz-border-radius-topleft: 0;
 border-radius: 4px;
 border-top-left-radius: 0;
 
 -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
 -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
 box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
}

.CW-menu ul li { padding: 0; margin: 0; float: none; }

.CW-menu ul a { color: #444 !important; font-weight: normal; text-shadow: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }

.CW-menu ul ul 
{ 
 border-top: solid 1px #b4b4b4;
 
 left: 161px;
 top: -10px;
 
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
}

.CW-menu ul .arrow { z-index: 0 !important; top: 15px !important; }


.CW-menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

•  Lưu mẫu  lại

• Tạo một  Widget HTML/Javascript  và dán code sau vào:

<div class="CW-blog-menu" style="z-index: 7;">
<ul class="CW-menu">
<li>
<a href="javascript:;">Home</a>
</li>
<li>
<a href="javascript:;">About</a>
<ul>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
<ul>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
<ul>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">Contact</a>
<ul>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">Buy</a>
<ul>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
<li>
<a href="javascript:;">Sub Item</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">Blog</a>
</li>
</ul>
</div>

 Lưu  và thế là bạn đã có một menu tuyệt đẹp rồi!