• 纯CSS打造的一款简约的灰色下拉菜单


    代码简介:

    纯CSS两级下拉菜单,见得多了吧?本款完全是用CSS实现,没有任何的JavaScript代码,兼容性方面在IE8下没问题,IE6/IE7尚未测试。

    代码内容:

    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>纯CSS打造的一款简约的灰色下拉菜单_网页代码站(www.webdm.cn)</title> 
    <style type="text/css"> 
    .navigation { 
        margin:
    0
        padding:
    0
        610px; 
        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
        150px; 
        } 
    /* 选单区块*/ 
    .navigation li dl { 
        150px;
    /*ie6*/ 
        margin:
    0
        padding:
    0
        background
    -color:#fff; 
        border:solid 2px #
    666
        } 
    .navigation li dt a , .navigation li dd a{ display:block;} 
    /* 主选单dt */ 
    .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; 
        } 
    /* 子选单dd */ 
    .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;} 
    /*ie6 hack*/ 
    .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> 
        
    <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> 
            
    <dl> 
                
    <dt><a href="/">网页代码站</a></dt> 
                
    <dd><a href="http://www.webdm.cn">网站首页</a></dd> 
                
    <dd><a href="#">最新更新</a></dd> 
                
    <dd class="last"><a href="#">最新排行</a></dd> 
            
    </dl> 
        
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
        
    </li> 
        
    <li> 
        
    <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> 
            
    <dl> 
                
    <dt><a href="#">Photoshop</a></dt> 
                
    <dd><a href="http://www.webdm.cn">Macromedia</a></dd> 
                
    <dd class="last"><a href="http://www.webdm.cn">Microsoft</a></dd> 
            
    </dl> 
         
    </li> 
         
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
         
    <li> 
         
    <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> 
            
    <dl> 
                
    <dt><a href="#">jQuery</a></dt> 
                
    <dd><a href="http://www.webdm.cn">Prototype</a></dd> 
                
    <dd class="last"><a href="#">辅助工具</a></dd> 
            
    </dl> 
        
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->     
        
    </li> 
    </ul>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    </body> 
    </html>
    代码来自:http:
    //www.webdm.cn/webcode/9ba1f936-338d-4d0a-adcb-3c813cc19b00.html
  • 相关阅读:
    BZOJ4008: [HNOI2015]亚瑟王
    BZOJ4260: Codechef REBXOR
    BZOJ4408: [Fj Winter Camp 2016]神秘数
    BZOJ4010: [HNOI2015]菜肴制作
    ccc2016
    BZOJ3884: 上帝与集合的正确用法
    BZOJ1017: [JSOI2008]魔兽地图DotR
    BZOJ1011: [HNOI2008]遥远的行星
    BestCoder Round #73
    hdu4035(概率dp)
  • 原文地址:https://www.cnblogs.com/webdm/p/2121781.html
Copyright © 2020-2023  润新知