Menu nằm ngang CSS3-only horizontal drop line tab cho Wordpress

25th Aug 2021
Table of contents

Recently, Web Designer Wall posted this really cool tutorial on creating a dropdown menu using only CSS3 (no javascript). Not being one to just sit back and let things sit as is, the approach inspired me make a variation. The result, however directly derivitive, is this horizonatal drop line menu based on a variation of WDW's tut.

Có hình ảnh để tưởng tượng

Menu nằm ngang CSS3-only horizontal drop line tab cho Wordpress
Menu nằm ngang CSS3-only horizontal drop line tab cho Wordpress

The XHTML markup:

<div id="menu">


<ul id="nav">

<li><a href="#">Menu 1</a>

 <ul>

 <li><a href="#">Menu 1 Submenu item 1</a></li>

 <li><a href="#">Menu 1 Submenu item 2</a></li>

 <li><a href="#">Menu 1 Submenu item 3</a></li>

 </ul>

</li>


<li><a href="#">Menu 2</a>

 <ul>

 <li><a href="#">Menu 2 Submenu item 1</a></li>

 <li><a href="#">Menu 2 Submenu item 2</a></li>

 <li><a href="#">Menu 2 Submenu item 3</a></li>

 </ul>

</li>


<li><a href="#">Menu 3</a>

 <ul>

 <li><a href="#">Menu 3 Submenu item 1</a></li>

 <li><a href="#">Menu 3 Submenu item 2</a></li>

 <li><a href="#">Menu 3 Submenu item 3</a></li>

 </ul>

</li>

</ul>

</div>

The CSS:

#menu {
  width: 960px;
  height: 40px;
  clear: both;
}
 
ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}
 
ul#nav li {
  display: inline;
}
 
ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;    
}
 
/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}
 
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}
 
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x; 
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
}
 
ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;
}
 
ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}
Attach

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Image CAPTCHA
Enter the characters shown in the image.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”

Related Articles

Nếu bạn muốn liệt kê tất cả các danh mục có sẵn cho một loại bài đăng tùy chỉnh, đoạn mã này có thể giúp bạn.

WP_Query là một lớp mạnh mẽ và cung cấp nhiều bộ lọc và hành động mà bạn có thể sử dụng để thay đổi cách vòng lặp WordPress hiển thị dữ liệu và cách truy vấn truy xuất dữ liệu.

If you want to build a simple, similar post list – in a single page view – when you query the latest or random posts from a post type you can use WP_Query.