纯css下拉菜单

2014-11-30 10:04:30 -0500

[代码收集][CSS+HTML]纯css下拉菜单

2014-06-21 06:47:34 +0800

纯css下拉菜单

转自@模板无忧网

html代码

<title>纯CSS下拉菜单</title> 
<style type="text/css"> 
.navigation { 
    margin:0; 
    padding:0; 
    width:300px; 
    list-style-type:none; 
    font:12px Arial; 
    float:left;
    } 
.navigation li { 
    float:left;
    padding:0; 
    margin:0 10px 0 0; 
    _margin:0 2px 0 0; 
    width:80px; 
    } 
.navigation li dl { 
    width:80px;
    margin:0; 
    padding:0; 
    background-color:#fff; 
    border:solid 2px #666; 
    } 
.navigation li dt a , .navigation li dd a{ display:block;} 
.navigation li dt { 
    margin:0; 
    padding: 5px; 
    text-align:center; 
    background-color:#fff; 
    font-size: 12px; 
    font-weight: bold; 
    height:15px; 
    overflow:hidden; 
    } 
.navigation li dt a ,.navigation  li dt a:visited { 
    display:block; 
    color:#333; 
    text-decoration:none; 
    } 
.navigation li dd { 
    margin:0; 
    padding:0; 
    color: #333; 
    background-color:#efefef; 
    border-bottom:dotted 1px #666; 
    } 
.navigation li dd.last { 
    border-bottom:0; 
    } 
.navigation li dd a, .navigation  li dd a:visited { 
    display:block; 
    color:#333; 
    text-decoration:none; 
    padding:4px 5px 4px 20px; 
    } 
.navigation li dd { display:none;} 
.navigation li:hover dd, .navigation li a:hover dd { display:block;}
.navigation li:hover,.navigation li a:hover { border:0;} 
.navigation table { border-collapse:collapse; 
    padding:0; 
    text-align:left; 
    } 
</style> 
</head> 
<body> 
<ul class="navigation"> 
    <li> 
   
        <dl> 
            <dt><a href="http://www.mb5u.com">模板无忧</a></dt> 
            <dd><a href="#"> 网站首页</a></dd> 
            <dd><a href="http://www.mb5u.com/jscss">网页特效</a></dd> 
            <dd><a href="#">最新更新</a></dd> 
            <dd class="last"><a href="#">脚本资源</a></dd> 
        </dl> 
     
    </li> 
    <li> 
     
        <dl> 
            <dt><a href="#">Photoshop</a></dt> 
            <dd><a href="#">AJAX资源</a></dd> 
            <dd class="last"><a href="#">网页范例</a></dd> 
        </dl> 
     </li> 
      
     <li> 
      
        <dl> 
            <dt><a href="#">css</a></dt> 
            <dd><a href="#">实用案例</a></dd> 
            <dd class="last"><a href="#">辅助工具</a></dd> 
        </dl> 
         
    </li> 
</ul>
</body> 
</html> </span>

代码演示

纯CSS下拉菜单

«Newer Older»

Back to home

Subscribe | Register | Login | N