你的位置:首页 > 软件开发 > 网页设计 > 何使用CSS写出一个下拉菜单。

何使用CSS写出一个下拉菜单。

发布时间:2016-01-16 17:00:04
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢?下面为大家分享一下我的经验 方法步骤:第一步 :首页我们打开Sublime Text或其它编辑器,创建一个名为nav的导航菜单 ...

导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用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>

如下图所示:

何使用CSS写出一个下拉菜单。

第二步:

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

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

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

何使用CSS写出一个下拉菜单。

 

页面预览效果如图所示:

何使用CSS写出一个下拉菜单。

 

第三步: 

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

代码如下:

<div >

原标题:何使用CSS写出一个下拉菜单。

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。