纯css实现分类导航效果

来源：互联网发布：大趋势炒股软件编辑：程序博客网时间：2024/05/15 02:02

在不使用js的情况下，悬浮层效果使用hover选择器实现。二级菜单平常设定为display：none;在触发一级菜单时显示一级菜单display:block。另外巧用空白块实现如下图效果：输入图片说明具体代码如下： .topmenu li:hover span{ background:white; width:20px; height:30px; display:inline-block; position:relative; float:right; z-index: 5; } 另外一个重点就是使用z-index属性，正确显示悬浮层。z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,如果之前的一级目录设置为3，像之后的二级目录的z-index就设置为4了。

.html代码

`<!DOCTYPE HTML><html>    <head>    <meta charest="utf-8">    <title>商城分类导航效果</title>        <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/nav.css">    </head>    <body>        <ul class="topmenu">            <div class="toptitle">全部商品分类</div>            <li><a href="#">图书、音像、数字商品</a><span></span>                <div class="submenu">                    <dl>                        <dt><a href="#">电子书</a></dt>                        <dd>                            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>                            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>                        </dd>                    </dl>                    <dl>                        <dt><a href="#">数字音乐</a></dt>                        <dd>                            <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>                            <a href="#">乡村民谣</a> <a href="#">有声读物</a>                        </dd>                    </dl>                    <dl>                        <dt><a href="#">音像</a></dt>                        <dd>                            <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>                        </dd>                    </dl>                </div>            </li>            <li><a href="#">家用电器</a></li>            <li><a href="#">手机、数码</a></li>            <li><a href="#">电脑、办公</a></li>            <li><a href="#">家居、家具、家装、厨具</a></li>            <li><a href="#">服饰内衣、珠宝首饰</a></li>            <li><a href="#">个护化妆</a></li>            <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>            <li><a href="#">运动户外</a></li>            <li><a href="#">汽车用品</a></li>            <li><a href="#">母婴、玩具乐器</a></li>            <li><a href="#">食品饮料、酒类、生鲜</a></li>            <li><a href="#">营养保健</a></li>        </ul>    </body></html>

.css代码

body{    padding:0;    font-size:14px;}.topmenu{    display:block;    width:220px;    border:2px solid #e4393c;    margin:0;    padding:0;/*为什么不加这一句就会有错？？？？？*/    z-index: 3;}.toptitle{    height:40px;    line-height: 40px;    color:white;    background:#e4393c;    font-size: 15px;    font-weight: bold;    padding-left: 20px;}.topmenu li{      height:30px;    line-height: 30px;    list-style-type: none;    padding-left: 10px;    background: url(../image/1.png);    background-repeat: no-repeat;    background-position: right;}.topmenu li:hover{    background:none;    border:1px solid #ddd;    border-right: 0px;    box-shadow: 0 0 5px #ddd;}.topmenu li a{    color:black;    font-size: 15px;    text-decoration: none;}.topmenu li a:hover{    color:#e4393c;    text-decoration: underline;    font-weight: bold;}.submenu{    display:none;    width:715px;    border:1px solid #ddd;    position:absolute;    left:220px;    top:40px;    box-shadow: 0 0 5px #ddd;    background:white;    z-index:4;    margin:5px;}.topmenu li:hover .submenu{    display:block;}.topmenu li:hover span{    background:white;    width:20px;    height:30px;    display:inline-block;    position:relative;    float:right;    z-index: 5;}.submenu dl{    display:block;    border-bottom:1px solid #eee;    overflow: hidden;    padding-bottom: 6px;}.submenu dl dt{    display:block;    float:left;    text-align: right;    width:60px;    height:22px;    /*background-color: red;*/    line-height: 22px;    /*padding-right: 12px;*/}.submenu dl dt a{    color:#e4393c;    font-weight: bold;    font-size: 13px;    text-decoration: underline;    padding-right: 8px;}.submenu dl dd{    display:block;    overflow: hidden;}.submenu dl dd a{    padding-right: 6px;    border-left: 1px solid #ccc;    color:#737373;    font-size: 12px;    padding:0 5px;    height:14px;    line-height: 14px;    margin: 4px 0;}

0 0