纯css框架|纯css防淘宝网分类菜单实例

更新时间：2019-05-29 来源：css3教程手机版 字体：大中小

【www.bbyears.com--css3教程】

提示：您可以先修改部分代码再运行

<!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>
        
            
                
                    
                        分类1 
                    
                    >
                
                分类1 详细信息

分类2 
                    
                    >
                
                分类2 详细信息

分类3 
                    
                    >
                
                分类3 详细信息

分类4 
                    
                    >
                
                分类4 详细信息

分类5 
                    
                    >
                
                分类5 详细信息

分类6 
                    
                    >
                
                分类6 详细信息

分类7 
                    
                    >
                
                分类7 详细信息

分类8 
                    
                    >
                
                分类8 详细信息

分类9 
                    
                    >
                
                分类9 详细信息
             
         
    </body>
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/css/52411.html

链接：http://www.bbyears.com/css/52411.html
纯css框架|纯css防淘宝网分类菜单实例(转载时请注明本文出处及链接)

猜你感兴趣

本类排行

本类最新

更多>>

纯css框架|纯css防淘宝网分类菜单实例

猜你感兴趣

热门标签

本类排行

本类最新