纯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制作三级导航菜单效果预览:





纯CSS制作三级导航菜单





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

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

99%的人还看了以下文章

  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    2.5K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    4.1K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    3.9K0
  • jQuery插件实现省、市、区县三级联动代码,调用非常简单

    在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码,今天125建站网给大家分享一款中国省、市、区县三级联动的代码,通过jQuery插件实现,调用非常简洁。 HTML结构 基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。 <div><!– conta…

    2019年6月5日
    3.6K0
  • 导航特效:jquery实现当前(活动)菜单样式变化

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

    2018年2月8日
    1.8K0
  • 精美的滑出式水平导航特效

    一个精美的滑出式水平导航特效,打开页面只能看到文本链接,用户将鼠标悬停于标签上时,该导航菜单项目会滑出。 预览     下载源码 1、HTML结构 导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

    2018年2月6日
    2.2K0

发表回复

登录后才能评论