Dropmenu Ngang Đơn Giản Mà Đẹp By Hữu Cương Blog

Dropmenu ngang này được mình thiết kế dựa trên Html và Css,nhìn nó tuy cũng đơn giản nhưng cũng đẹp đó chứ.
Để tạo được menu này thì các bạn làm theo mình nhé:
Bước 1:
Các bạn vào Mẫu>Chỉnh Sửa Html>Ctrl+F tìm ]]></b:skin> :dán đoạn code sau vào trước nó:

* {
 margin:0;
 padding:0;
}
body {
  font-family:sans-serif;
  margin:0 auto;
}
#menu ul {
  list-style-type: none;
  background-color:#1f568b;
  text-align:center;
}
#menu ul li {
  color:#f1f1f1;
  display:inline-table;
    width:120px;
  height:56px;
  line-height:53px;
  position:relative;
}
#menu ul li a {
  color:#f1f1f1;
  text-decoration: none;
  display:block;
}
#menu ul li a:hover {
  color:#00FF8B;
border-bottom: 3px solid red;
}
#menu ul li > #sub-menu {
  display: none;
  position:absolute;
}
#menu ul li:hover #sub-menu {
  display:block;
}

Sau đó bạn vào Bố Cục >Thêm tiện ích > Html & Css và dán đoạn code sau vào trong đó:

<div id="menu">
<ul>
<li><a href="#">Chính Trị-Xã Hội</a>
<ul id="sub-menu">
<li><a href="#">Việt Nam</a></li>
<li><a href="#">Thế Giới</a></li>
</ul>
</li>
<li><a href="#">Thế Giới</a></li>
<li><a href="#">Nhịp Sống Trẻ</a>
<ul id="sub-menu">
<li><a href="#">Việt Nam</a></li>
<li><a href="#">Châu Á</a></li>
<li><a href="#">Châu Âu</a></li>
<li><a href="#">Châu Mỹ</a></li>
</ul>
</li>
<li><a href="#">Giáo Dục</a></li>
<li><a href="#">Kinh Tế</a></li>
</ul>
</div>

và bạn đặt nó ở nơi bạn muốn hiển thị là xong.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest