div+css制作导航下拉菜单

SOASPX 6360 0

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

1、打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单

div+css制作导航下拉菜单-第1张图片-.net教程网

2、现在为nav添加样式,首先去掉默认的margin和padding,再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。

div+css制作导航下拉菜单-第2张图片-.net教程网

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

div+css制作导航下拉菜单-第3张图片-.net教程网

4、添加完二级栏目后,现在开始添加css样式,首先给<li>标签下的<ul>标签添加相对定位,再去除之下<li>标签的做浮动样式,再适当修改<a>标签

div+css制作导航下拉菜单-第4张图片-.net教程网

5、接下来隐藏掉二级下来菜单,并给它添加鼠标滑动效果,使得当鼠标滑动到主栏目时,二级下来菜单显示。完成编辑

div+css制作导航下拉菜单-第5张图片-.net教程网

标签: css div

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~