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{

color: #F63;

}
/******************************************/
/*二次リスト属性*/
.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;

text-align:center;

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

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

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

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

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