Chúng ta sẽ định dạng cho menu trong wordpress như hình dưới
Menu cấp 1 có: About, Home, Services, Contact. Trong Menu Servies có cấp 2 & cấp 3
HTML
<div id="navigation">
<ul>
<li><a href="">About</a></li>
<li><a href="">Home</a></li>
<li><a href="">Services</a>
<ul>
<li><a href="">Construction</a></li>
<li><a href="">Home Building</a></li>
<li><a href="">Wood Work >></a>
<ul>
<li><a href="">Deck Building</a></li>
<li><a href="">Custom Cabinets</a></li>
</ul>
</li>
<li><a href="">Welding</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS
/* ===== Top ===== */
#navigation ul {
list-style:none;
margin:0;
padding:1px 0;
}
#navigation ul li{
float:left;
}
/* ===== Menu cấp 1 ===== */
#navigation ul li {
position:relative;
padding:0;
margin:0;
border-right:1px solid #999;
background: #aaa;
}
#navigation ul ul li {
border:none;
background: #777;
}
#navigation ul li a {
display:block;
text-decoration:none;
font-size:18px;
color:#fff;
padding:0 30px;
line-height:43px;
}
#navigation ul li:hover a {
position:relative;
background:#777;
color:#fff;
}
#navigation ul ul, #navigation ul li:hover ul ul {
position:absolute;
display:none;
}
#navigation ul ul li:hover ul, #navigation ul li:hover ul li:hover ul {
display:block;
top:0px;
left: 100%;
}
/* ===== Menu cấp 2 & 3 ===== */
#navigation ul li:hover ul {
display:block;
position:absolute;
left:0;
top:100%;
width:auto;
height:auto;
margin:0;
padding:0;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
#navigation ul ul {
background:#777;
}
#navigation ul ul ul {
background:#e4e4e4 !important;
border-color:#e4e4e4 !important;
margin-left:-14px;
}
#navigation ul ul li a {
float:none;
width:180px;
line-height:normal;
font-variant:normal;
font-weight:normal;
font-size:14px;
color:#fff;
text-transform:none;
padding:6px 10px;
background:none !important;
}
#navigation ul ul ul li a {
color:#fff;
font-weight:bold;
}
#navigation ul ul li:hover>a {
background:#fff !important;
color:#999 !important;
}
#navigation ul ul ul li:hover>a {
background:#eee !important;
color: #777 !important;
}
Chúc bạn thành công.
Nguồn tham khảo: http://www.thomasrudy.com/all-css-dropdown-menu-wordpress-friendly/
