1 导航栏

1-1 导航栏 = 链接列表

导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的：

<ul>

  <li><a href=" ">百度</a></li>

  <li><a href=" ">谷歌</a></li>

  <li><a href=" ">360</a></li>

  <li><a href=" ">火狐</a></li>

  <li><a href=" ">UC</a></li>

</ul>

css:

ul { list-style-type: none }/*删除圆点，导航栏不需要列表项标记*/

运行效果：

1-2 垂直导航栏

使用<ul>和<li>元素的导航栏，默认是垂直的，我们只需在上叙代码中添加<a>元素的样式：

a {

  display: block;/*块显示*/

  width: 50px;

  background-color: #5F6;

  text-decoration: none/*没有文本装饰*/

}

运行效果：

请始终规定垂直导航栏中元素的宽度。如果省略宽度，IE6 会产生意想不到的结果。

1-3 水平导航栏

有两种创建水平导航栏的方法。使用行内或浮动列表项。但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法。

（1）行内列表项

ul { list-style-type: none }

a {

  background-color: #5F6;

  text-decoration: none

}

li { display: inline } /*内联显示*/

运行效果：

因为 <li> 是内联显示，不能设置宽度，<a> 链接便根据文本的长度，自适应

（2）对列表项进行浮动

ul { list-style-type: none }

a {

  display: block;

  width: 50px;

  background-color: #5F6;

  margin-left: 10px;

  text-decoration: none

}

li { float: left } /*左浮动*/

运行效果：

2 下拉菜单

<div class="div1">

  <p>浏览器</p>

  <div class="div2">

    <a href="">百度</a>

    <a href="">谷歌</a>

    <a href="">360</a>

    <a href="">火狐</a>

    <a href="">UC</a>

  </div>

</div>

CSS:

.div1 {

  position: relative;

  text-align: center;

  display: inline-block

}

.div1 p {

  background-color: #562;

  font-size: 20px;

  width: 100px;

  height: 30px;

  color: #FFF

}

.div2 {

  position: absolute;

  right: 0;

  top: 50px;

  display: none;

  background-color: #BDB76B

}

.div2 a {

  display: block;

  width: 80px;

  text-decoration: none;

  color: #2F4F4F

}

.div1:hover .div2 {

  display: block

}

运行效果：

运行后效果图 鼠标悬浮时效果图