一个纯CSS实现的分类菜单!

HTML/CSS 2014-05-02 分类菜单,css

闲来无事,动手写了一个纯CSS的分类菜单,貌似还挺好用,可惜就没有动态效果了。

在线DEMO:http://www.qttc.net/static/demo/20140502/

Code:

<!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>

 

文字链接:《一个纯CSS实现的分类菜单!

文章地址:http://www.qttc.net/201405435.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?