CSS cho Menu Wordpress

Khi thiết kế website bằng wordpress hay thiết kế website bán hàng bằng wordpress thì việc tạo ra menu chính cho website là điều luôn cần thiết. Một menu chính ban đầu chưa có CSS, happiweb sẽ cung cấp mẫu CSS đơn giản, từ đó bạn có thể tùy chỉnh, việc này giúp bạn tiết kiệm rất nhiều thời gian.

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/