导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用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>
如下图所示:
第二步:
现在我们为nav添加样式,首先去掉默认的margin和padding,
再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。
接下来再添加适当的样式(根据实际需要添加)进行美化,如一下样式:
页面预览效果如图所示:
第三步:
像这样,一个菜单横向菜单就建好了,下面我们给栏目一,栏目二,栏目三,添加二级下拉菜单
代码如下:
<div >
原标题:何使用CSS写出一个下拉菜单。
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。