zoukankan      html  css  js  c++  java
  • 一个纯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

  • 相关阅读:
    webpack 5 之持久化缓存
    前端资源加载失败优化
    如何用 JS 实现二叉堆
    简单解析一下扫码登陆原理,简单到你想不到!
    实战:Express 模拟 CSRF 攻击
    Yarn 的 Plug&#39;n&#39;Play 特性
    为什么现在我更推荐 pnpm 而不是 npm/yarn?
    小米3移动版刷安卓6.0-小米手机3 移动版 Flyme 6.7.11.24R beta
    小米5手机最后一版安卓6.0 MIUI8 6.11.10 小米5s手机最后一版安卓6.0 MIUI8 7.6.8
    vim格式转换
  • 原文地址:https://www.cnblogs.com/webdm/p/2059519.html
Copyright © 2011-2022 走看看