你的位置:首页 > 网页设计

[网页设计]CSS制作一个简单网页的下拉导航栏


 

网页下拉导航栏的制作

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

首先说明几个简单的伪选择器(比较常用的):

      

      link:连接平常的状态

      visited:连接被访问过之后

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

      active:连接被按下的时候

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

  下面写一段简单导航栏:

    

  <div><!--导航栏-->
    <div >
      <ul >
        <li ><a href="#">父标签零</a>
          <ul>

            <li><a href="#">子标签一</a></li></ul>

          </li>
          <li><a href="#">父标题一</a>
            <ul >
              <li><a href="#">子标题一</a></li>
              <li><a href="#">子标题二</a></li>
              <li><a href="#">子标题二</a></li>
            </ul>
          </li>

          <li><a href="#">父标题二</a>
            <ul >
              <li><a href="#">子标题一</a></li>
              <li><a href="#">子标题二</a></li>
              <li><a href="#">子标题二</a></li>
            </ul>

          <li><a href="#">父标题三</a>
            <ul>
              <li><a href="#">子标题一</a>
              <li><a href="#">子标题二</a>
            </ul>

          </li>

      </ul>

    </div>


</div><!--导航栏-->

 

 

 

CSS代码:

.navbar{
  height: 120px;
  width: 100%;
  text-align:left;
  font-family: arial, sans-serif;
  background:url(navbar.png) no-repeat;
  padding-top:10px;
  }
/***********************************/
/*一级列表属性*/
.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;
  display: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 ul 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.鼠标放在标题上时:

        

 

 

这里,我只是做了简单写了一个,界面不是很好看,你自己可以制作出很精美的导航栏,其中有什么不足,请大家指出。