Create a drop-down navigation bar for a simple web page with CSS_html/css_WEB-ITnose

 

网页下拉导航栏的制作

网页下拉导航栏的制作很简单，只需要运用好CSS中伪选择器。

首先说明几个简单的伪选择器（比较常用的）：

　　　　　　

　　　　　　link:连接平常的状态

　　　　　　visited:连接被访问过之后

　　　　　　hover:鼠标放到连接上的时候

　　　　　　active:连接被按下的时候

　　通常导航栏是用列表标签制作，通过伪选择器的控制，实现其下拉的效果。

　　下面写一段简单导航栏：

　　　　

　　

　　　　

　　　　　　

　　　　　　　　
• 父标签零
  　　　　　　　　　　

  　　　　　　　　　　　　

  • 子标签一

  　　　　　　　　　　


　　　　　　　　　　
• 父标题一
  　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　
  • 子标题一
  
  　　　　　　　　　　　　　　
  • 子标题二
  
  　　　　　　　　　　　　　　
  • 子标题二
  
  　　　　　　　　　　　　
  
  　　　　　　　　　　

　　　　　　　　　　

• 父标题二
  　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　
  • 子标题一
  
  　　　　　　　　　　　　　　
  • 子标题二
  
  　　　　　　　　　　　　　　
  • 子标题二
  
  　　　　　　　　　　　　
  
  　　　　　　　　　　
• 父标题三
  　　　　　　　　　　　　
  
  　　　　　　　　　　　　　　
  • 子标题一
    　　　　　　　　　　　　　　
  • 子标题二
    　　　　　　　　　　　　

  　　　　　　　　　　

　　　　　　

　　　　

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 attribute*/
.navbar ul{
float:left;
​ margin-top:0px;
width:91px;
padding-left:0px;
padding-top:0px;

}

.navbar ul li a{
text-align: center; /*border-right:1px solid #e9e9e9; */
​padding:10px;
​display:block;
​text-decoration:none; >/*******************************************/

.link a:hover{
　　color: #F63;
　}
/****************************************** */
/*Secondary list attribute*/
.navbar ul li ul {
　display: none;/**/
　　　　　}
.navbar ul li:hover ul {

　display: block;

　position: absolute;
　background-color:#CCC;
　　}
/*二Level list style*/
.navbar ul li ul{
　width : 95px; :center;
 padding-left:2px; >The display effect is as follows:

1. When the mouse is not on the title bar

2. When the mouse is on the title:

🎜>





Here, I just made a simple one. The interface is not very beautiful. You can make a very beautiful navigation bar yourself. What's in it? If there are any shortcomings, please point them out.