• 一个纯CSS下拉菜单


    代码简介:

    纯CSS下拉菜单,绝对没有用Javascript,虽然简单,但是美观大方,先运行一下看看效果吧,本菜单扩展性很好,你完全可以在此基础上继续完善功能,以满足您的使用要求。

    代码内容:

    <!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <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;} 
    .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;} 
    /*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="http://www.webdm.cn">网页代码站</a></dt> 
                <dd><a href="#">网站首页</a></dd> 
                <dd><a href="/">网页特效</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="#">AJAX资源</a></dd> 
                <dd class="last"><a href="#">网页范例</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="#">css</a></dt> 
                <dd><a href="#">实用案例</a></dd> 
                <dd class="last"><a href="#">辅助工具</a></dd> 
            </dl> 
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->     
        </li> 
    </ul>
    </body> 
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/693af794-a0ef-4fe6-8ca7-778d80a1bd6a.html

  • 相关阅读:
    9.1 一周学习总结
    EasyUI(添加购物车小demo)
    助你了解react的小demo
    PHP(一)OOP基础
    继承的三种方式
    jQuery基础应用
    刘强1109 JavaScript基础二(分支与循环结构)
    JavaScript基础一(js基础函数与运算符)
    移动开发与响应式
    css基础语法三
  • 原文地址:https://www.cnblogs.com/webdm/p/2059519.html
Copyright © 2020-2023  润新知