网页下拉导航栏的制作
网页下拉导航栏的制作很简单,只需要运用好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 {
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.