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

[网页设计]何使用CSS写出一个下拉菜单。

导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢?

下面为大家分享一下我的经验

 

方法步骤:

第一步  :

首页我们打开Sublime Text或其它编辑器,创建一个名为nav的导航菜单    

     

<div >     

        <ul>         

            <li><a href="#">栏目一</a></li> 

            <li><a href="#">栏目二</a></li>

            <li><a href="#">栏目三</a></li>

            <li><a href="#">栏目四</a></li>

            <li><a href="#">栏目五</a></li>

        </ul>

    </div>

如下图所示:

第二步:

 现在我们为nav添加样式,首先去掉默认的margin和padding,

再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。

接下来再添加适当的样式(根据实际需要添加)进行美化,如一下样式:

 

页面预览效果如图所示:

 

第三步: 

像这样,一个菜单横向菜单就建好了,下面我们给栏目一,栏目二,栏目三,添加二级下拉菜单

代码如下:

<div >
    <ul>
      <li><a href="#">栏目一</a>
       <ul>
              <li><a href="#">二级栏目</a></li>
              <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>
              <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>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
          </ul>
      </li>
      <li><a href="#">栏目四</a></li>
      <li><a href="#">栏目五</a></li>
    </ul>
 </div>

    

第四步: 

 添加完二级栏目后,现在我们开始添加css样式,

首先给<li>标签下的<ul>标签添加相对定位,

再去除之下<li>标签的做浮动样式,再适当修改<a>标签,如一下样式:

代码如下:

.nav ul li ul { 

  position:absolute;

}

.nav ul li ul li { 

  float:none;

}

.nav ul li ul li a { 

  border-right:none; 

  border-top:1px dotted #ccc; 

  background:#f5f5f5;

}

 

页面刷新效果如图:

        

 

 

第五步: 

 

 

 

 

 接下来我们隐藏掉二级下来菜单,并给它添加鼠标滑动效果,使得当鼠标滑动到主栏目时,二级下来菜单显示,样式如下:

.nav ul li ul { 

  position:absolute; 

  display:none;

}

.nav ul li ul li {

   float:none;

}

.nav ul li ul li a { 

  border-right:none; 

  border-top:1px dotted #ccc;

   background:#f5f5f5;

}

.nav ul li:hover ul{

   display:block; 

}

再次预览效果,如下图所示:

 

第六步: 

 至此,横向二级下拉菜单就制作完成了,这里附加上全部代码,以方便各位朋友参考,感谢各位朋友的浏览。