纯css制作三级菜单

最新推荐文章于 2025-06-06 14:59:57 发布

面条请不要欺负汉堡

最新推荐文章于 2025-06-06 14:59:57 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css+html 文章标签：三级菜单纯css的三级菜单选择器菜单

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/60745401

css+html 专栏收录该内容

15 篇文章

订阅专栏

一.注意点：

1.选择器的使用

①element1>element2：如果元素element2不是父元素element1的直接子元素，则不会被选择。

②element1+element2：选择器用于选取第一个指定的元素element1之后（不是内部）紧跟的元素element2，同级元素

③:hover :选择器用于选择鼠标指针浮动在上面的元素

④:after: 选择器在被选元素的内容后面插入内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    	body,ul,li,a,p{margin: 0;padding: 0;}
    	a{text-decoration: none; color: #555;font-size: 23px;}
        .clearfix:after,.zn-clearfix:before{content: ""; visibility: hidden; display: block; height: 0; clear: both; }
        .clearfix{zoom:1;margin: 20px auto; width:1700px;}
        .zn-header-nav ul li {
		    position:relative; 
		    display: inline-block;
		}
		ul .sub-menu.zn-header-menussub{
		    position: absolute;
		    background: #fff;
		    left: 0;
		    top: 40px;
		    width: 175px;
		    border-radius: 5px;
			-moz-box-shadow: 0px 0px 3px #ccc;
			-webkit-box-shadow: 0px 0px 3px #ccc;
			box-shadow: 0px 0px 3px #ccc;
		}
		ul .sub-menu.zn-header-menussub:after{
		    content: "";
		    position: absolute;
		    left: -66px;
		    background: url(../images/navtop.png);
		    z-index: 3;
		    top: -14px;
		    top: 3px\9;
		    height: 14px;
		    font-size: 0px;
		    overflow: hidden;
		    width: 174px;
		}
		ul .sub-menu.zn-header-menussub li>a{
		    text-align: left;
		    margin: 0;
		    display: block;
		    padding: 4px 25px;
		}
		ul.zn-header-menus>li>a:hover {
			background: #4c2f0d;
			color: #fff;
		}
		ul .sub-menu.zn-header-menussub li:hover a{
		    background: #644b2e;
			color: #fff;	
		}
		ul .sub-menu.zn-header-menussub li,ul .zn-header-menusbb.sub-menu li{
			width: 100%;
			line-height: 30px;
		}
		ul .zn-header-menusbb.sub-menu{
			position: absolute;
			top: 0;
		    left: 175px;
		    background: #644b2e;
		    width: 150px;
		    padding-bottom: 10px;
		}
		ul .sub-menu {
		    display:none;
		}
		.zn-header-nav ul .zn-header-menusbb.sub-menu li a{
			color: #fff;
		}
		.zn-header-nav ul .zn-header-menusbb.sub-menu li:hover a{
			background: #ccc;
		}
		ul.zn-header-menus li:hover .zn-header-menussub{
			display: block;
		}
		ul .sub-menu.zn-header-menussub li:hover a+.zn-header-menusbb{
			display: block;
		}
    </style>
</head>
<body>
<div class="zn-header-nav">
    <ul class="zn-header-menus">
        <li><a href="./" >首頁</a></li>
        <li>
            <a href="#" class="active">產品介紹</a>
            <ul class="sub-menu zn-header-menussub ">
                <li>
                    <a href="#2">照片書</a>
                    <ul  class="sub-menu  zn-header-menusbb">
                        <li><a href="#1">精裝</a></li>
                        <li><a href="#1">簡裝</a></li>
                        <li><a href="#1">騎馬釘</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#2">卡片系列</a>
                    <ul  class="sub-menu  zn-header-menusbb">
                        <li><a href="#1">半島鐵盒</a></li>
                        <li><a href="#1">分享卡</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">相片月歷</a>
                    <ul  class="sub-menu  zn-header-menusbb">
                        <li><a href="#1">臺歷</a></li>
                        <li><a href="#1">掛歷</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">相片小物</a>
                    <ul  class="sub-menu  zn-header-menusbb">
                        <li><a href="#1">拼圖</a></li>
                        <li><a href="#1">水杯</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">服務</a></li>
        <li><a href="#">製作指南</a></li>
        <li><a href="#">客服聯絡</a></li>
        <li><a href="#">公司背景</a></li>
    </ul>
</div>
</body>
</html>