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.