分类菜单啊 - 前端 - php中文网博客

首页 > 博客列表 > 分类菜单啊
博主信息
博文 55
粉丝 0
访问量 70710
专题推荐
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
分类菜单啊
南鸢离梦的博客
原创
772人浏览过
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>分类菜单</title>
        <style type="text/css">
            * {
                margin: 0; 
                padding: 0;
            }
            body {
                font:14px/1.5 "宋体";
            }
            a {
                text-decoration: none; 
            }
            a:hover {
                color: red; 
            }
            ul {
                position: relative; 
                margin: 50px 0 0 50px;
                width: 300px;
                border: 2px solid #aa9900;
            }
            li {
                height: 30px; 
                line-height: 30px;
                width: 100%;
                text-indent: 1em;
                list-style: none;
                border-top: 1px solid #CCC;
            }
            li:hover,
            li:hover + li,
            li:first-child {
                border-top: none; 
                height: 31px;
                line-height: 31px;
            }
            div.box {
                width: 300px; 
                height: calc(100% + 2px);
                display: none;
                left: 300px;
                top: -2px;
                border: 1px solid #999;
                position: absolute;
                z-index: 1;
                background: #EEE;
            }
            div.item {
                position: relative; 
                width: 100%;
                height: 100%;
            }
            li:hover div.box {
                display: block; 
            }
            li div.item span.link { 
                display: block;
                width: calc(100% - 1px);
                height: calc(100% - 2px);
                position: absolute;
                left: 0;
                top: 0;
                border-style: solid;
                border-color: #FFF;
                border-width: 1px 0 1px 1px;
                z-index: 2;
            }
            li:hover div.item span.link {
                border-color: #999;
                background: #EEE;
                width: 100%;
            }
            span.icon {
                position: absolute;
                right: 10px;
                top: 0;
                color: #999;
                font-weight: bold;
                font-family: serif;
            }
            li:hover a {
                color: #270; 
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类1</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类1 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类2</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类2 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类3</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类3 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类4</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类4 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类5</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类5 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类6</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类6 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类7</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类7 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类8</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类8 详细信息</div>
            </li> 
            <li>
                <div class="item">
                    <span class="link">
                        <a href="#">分类9</a> 
                    </span>
                    <span class="icon">&gt;</span>
                </div>
                <div class="box">分类9 详细信息</div>
            </li> 
        </ul> 
    </body>
</html>
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
搭建服务器

2019-08-06 14:10:48