CSS技巧分享：如何用css制作横排二级下拉菜单

CSS技巧分享：如何用css制作横排二级下拉菜单

导航菜单是每个网站所必备的功能，也是每个学习制作网站的朋友所必须接触的，如何用css样式制作一个简单漂亮的二级下拉菜单呢，下来小编就一步一步教大家来制作横排二级下拉菜单，让我共同来学习吧。

首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单

如下图所示：

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

< li>标签的list-style样式和标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：

打开页面预览效果

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

• 栏目一

  • 二级栏目
  • 二级栏目
  • 二级栏目
  • 二级栏目

• 栏目二

  • 二级栏目
  • 二级栏目
  • 二级栏目
  • 二级栏目

• 栏目三

  • 二级栏目
  • 二级栏目
  • 二级栏目
  • 二级栏目
  • 二级栏目

• 栏目四
• 栏目五

添加完二级栏目后，现在我们开始添加css样式，首先给

• 标签下的
  标签添加相对定位，再去除之下
  • 标签的做浮动样式，再适当修改标签，如一下样式：

    .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;}

    再次预览效果，如下图所示：

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

    • 栏目一

      • 二级栏目
      • 二级栏目
      • 二级栏目
      • 二级栏目

    • 栏目二

      • 二级栏目
      • 二级栏目
      • 二级栏目
      • 二级栏目

    • 栏目三

      • 二级栏目
      • 二级栏目
      • 二级栏目
      • 二级栏目
      • 二级栏目

    • 栏目四
    • 栏目五

    这种写法不支持IE6浏览器，IE6只支持a下的hover，所以无法实现正确的显示，但是微软已经将IE6浏览器淘汰了，但是如果您还在使用，那么请添加相应的js实现。

    版权声明：文章由 酷酷问答 整理收集，来源于互联网或者用户投稿，如有侵权，请联系我们，我们会立即处理。如转载请保留本文链接：https://www.kukuwd.com/answer/168210.html