CSS_html/css_WEB-ITnose を使用して単純な Web ページのドロップダウン ナビゲーション バーを作成する

网页下拉导航栏的制作

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

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

　　　　　　link:连接平常的状态

　　　　　　visited:连接被访问过之后

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

　　　　　　active:连接被按下的时候

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

　　下面写一段简单导航栏：

CSS コード:

.navbar{
高さ: 120px;
幅: 100%;
text-align:left;
フォント-家族: arial, sans-serif;
Background:url(navbar.png) no-repeat;
padding-top:10px;
}
/**********************************/
/*第1レベルのリスト属性*/
。 navbar ul{
float:left;
margin-top:0px;
padding:0px;/*Ulにはデフォルトでパディングが付いています*/

}

.navbar ul li{
float:left;
width:91px;
.padding-left:0px;
padding-top:0px;
}
.navbar ul li a{
text-align: center;
/*border-right:1px Solid #e9e9e9; */
padding:10px; :block;
text-decoration:none;
color:#999;
}
/***********************************************/
.link a:hover{

}
/******************************************/
/*二次リスト属性*/
.navbar ul li ul {
display: none;/**/
}
.navbar ul li:hover ul {
display: block;
position:Absolute;
background-color:#CCC;
}
/*セカンダリリストのスタイル*/
.navbar li ul{
width:95px ;
}
.one_hopmepage{
width:80px;
}
.navbar ul li ul li{

width:119px;

padding-left:2px;
float :left;
}
/*********************************/

表示効果は以下の通りです:

1. マウスがタイトルバー上にない場合

2. マウスがタイトル上に置かれた場合:

ここでは、非常に見栄えの良いナビゲーションバーを作成しました。欠点がある場合は、ご指摘ください。 。