CSS makes a drop-down navigation bar for a simple webpage, and css drop-down navigation bar

CSS makes a drop-down navigation bar for a simple webpage, and css drop-down navigation bar

 

Creation of the webpage drop-down navigation bar

The production of the webpage drop-down navigation bar is very simple. You only need to use the pseudo selector in CSS.

First, describe several simple pseudo selectors (more commonly used ):

　　　　　　

Link: normal connection status

Visited: after the connection is accessed

Hover: When the mouse is placed on the connection

Active: when the connection is down

Generally, the navigation bar is created by using list tags. The drop-down effect is achieved through pseudo selector control.

Below is a simple navigation bar:

　　　　

<Div> <! -- Navigation bar -->
<Div class = "navbar">
<Ul class = "link">
<Li class = "one_hopmepage"> <a href = "#"> zero parent tag </a>
<Ul>

<Li> <a href = "#"> sub-tag 1 </a> </li></Ul>

</Li>
<Li> <a href = "#"> parent Title 1 </a>
<Ul class = "link">
<Li> <a href = "#"> subtitle 1 </a> </li>
<Li> <a href = "#"> subtitle 2 </a> </li>
<Li> <a href = "#"> subtitle 2 </a> </li>
</Ul>
</Li>

　　　　　　　　　　<Li> <a href = "#"> parent Title 2 </a>
<Ul class = "link">
<Li> <a href = "#"> subtitle 1 </a> </li>
<Li> <a href = "#"> subtitle 2 </a> </li>
<Li> <a href = "#"> subtitle 2 </a> </li>
</Ul>
<Li> <a href = "#"> parent Title 3 </a>
<Ul>
<Li> <a href = "#"> subtitle 1 </a>
<Li> <a href = "#"> subtitle 2 </a>
</Ul>

</Li>

</Ul>

</Div>

</Div> <! -- Navigation bar -->

 

 

 

CSS code:

. Navbar {
Height: 120px;
Width: 100%;
Text-align: left;
Font-family: arial, sans-serif;
Background: url(navbar.png) no-repeat;
Padding-top: 10px;
}
/***********************************/
/* First-level list attributes */
. Navbar ul {
Float: left;
Margin-top: 0px;
Padding: 0px;/* Ul default padding */

}

. Navbar ul li {
Float: left;
Width: 91px;
Padding-left: 0px;
Padding-top: 0px;
}
. Navbar ul li {
Text-align: center;
/* Border-right: 1px solid # e9e9e9 ;*/
Padding: 10px;
Display: block;
Text-decoration: none;
Color: #999;
}
/***************************************/

. Link a: hover {
Color: # F63;
}
/***************************************/
/* List attributes */
. Navbar ul li ul {
Display: none ;/**/
}
. Navbar ul li: hover ul {
Display: block;
Position: absolute;
Background-color: # CCC;
}
/* Second-level list style */
. Navbar ul li ul {
Width: 95px;
}
. One_hopmepage {
Width: 80px;
}
. Navbar ul li {

Width: 119px;
Text-align: center;
Padding-left: 2px;
Float: left;
}
/**********************************/

 

 

The display effect is as follows:

1. When the mouse is not in the title bar

　　　　

2. When you place the cursor over the title:

　　　　　　　　

 

 

Here, I just wrote a simple example. The interface is not very nice. You can create a very elegant navigation bar by yourself. What are the shortcomings.