纯CSS制作三级导航菜单

纯CSS制作三级导航菜单

本文分享如何使用纯CSS制作三级导航菜单,优点:代码简洁,速度快。

HTML代码:

<!--代码部分begin www.125jz.com-->
<div class="menu">
<ul class="nav1">
    <li class="li1"><a href="http://www.125jz.com">一级导航</a>
        <ul class="nav2">
            <li class="li2"><a href="#">二级导航</a></li>
            <li class="li2"><a href="#">二级导航</a>
                <ul class="nav3">
                    <li class="li3"><a href="#">三级导航</a></li>
                    <li class="li3"><a href="#">三级导航</a></li>
                    <li class="li3"><a href="#">三级导航</a></li>
                    <li class="li3"><a href="#">三级导航</a></li>
                </ul>
            </li>
            <li class="li2"><a href="#">二级导航</a></li>
            <li class="li2"><a href="#">二级导航</a></li>
        </ul>
    </li>
    <li class="li1"><a href="#">一级导航</a></li>
    <li class="li1"><a href="#">一级导航</a></li>
    <li class="li1"><a href="#">一级导航</a></li>
    <li class="li1"><a href="#">一级导航</a></li>
    <li class="li1"><a href="#">一级导航</a></li>
</ul>
</div>
<!--代码部分end-->

CSS代码:

*{margin: 0;padding: 0;}
.menu{ margin:100px 100px;}
.menu ul a{font-family: '微软雅黑';font-size: 14px;color: #333;text-decoration: none;}
.menu ul a:hover{color: #000;text-decoration: none;}
.menu ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;}
.menu ul li:hover{background: #c1c1c1;}
.menu ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;}
.menu ul.nav2{left: 99px;top: 0;display: none;}
.menu ul.nav3{left: 99px;top: 0;display: none;}
.menu .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}
.menu .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}

纯CSS制作三级导航菜单效果预览:

Tips:You can change the code before run.

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2423.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年8月1日 下午10:10
下一篇 2018年8月2日 上午10:46

99%的人还看了以下文章

  • 导航特效:jquery实现当前(活动)菜单样式变化

    用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。 当前(活动)菜单样式变化实现原理 在html代码中给首页(默认选中)加上class名cur <a href=…

    2018年2月8日
    2.4K0
  • 导航特效:纯CSS实现始终显示在页面顶部的导航条

    今天给大家分享的导航特效是始终显示在页面顶部的导航条,随着页面滚动,导航条始终显示的屏幕上方。

    2018年2月12日
    3.7K0
  • 纯css实现的三级下拉导航菜单

    非常简洁的一个三级导航菜单,纯css实现,适用于企业产品分类导航等,代码精简,兼容所有浏览器。 See the Pen 纯css实现的三级下拉导航菜单 by 江山如画 (@jgyzhr)on CodePen.

    2019年11月1日
    4.8K0
  • 如何去除导航栏最后一个不需要的分隔线

    网页导航栏制作时,菜单项之间常用1像素细线做分隔,如上图。 给菜单栏菜单项添加分隔线代码如下: /* 给菜单栏菜单项添加分隔线 */ .nav li { border-right: 1px solid #666; } 最后一个菜单项右边就不需要这个边框线了,如何处理呢? 去除最后一个菜单项右边的分隔线,代码 /* 移除分隔线 */ .nav li:last-…

    2018年7月26日
    4.4K0
  • 立体动画按钮、切换开关

    实例名称:立体动画按钮、切换开关在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码: <div id=”app”></div> CSS代码: body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

    2019年10月17日
    3.4K0
  • 点击弹出带关闭按钮的窗口特效(兼容所有浏览器)

    弹出页面被大多浏览器拦截,现在多数改为弹出窗口,即通过弹出层来实现,今天中国网页设计给大家分享两个点击弹出带关闭按钮的窗口代码。 jquery实现可拖动弹出窗口特效 <html > <head> <title>jquery实现可拖动弹出窗口特效-带关闭按钮</title> <script type=&qu…

    2018年5月9日
    3.9K0

发表回复

登录后才能评论