• 纯CSS实现简约大方灰紫色下拉菜单代码


    代码简介:又一个漂亮的纯CSS实现的下拉导航菜单,横向布局,适合作网站导航条,银色渐变色,鼠标放上更换菜单背景,用户体验极好,而且兼容性好,特别是对IE比较友好,火狐下也几乎不错位,推荐给站长使用。

    代码内容:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <style>
    .menucontainer{background: #fff url(http://www.webdm.cn/images/20090920/bgoff2_a.gif) top left repeat-x;}
    .menu {float:left;font-family: "Trebuchet MS",arial,verdana,sans-serif;100%;position:relative;font-
    
    size:11px;font-weight:bold;
    background:url(http://www.webdm.cn/images/20090920/bgOFF_a.gif) repeat-x;}
    .menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;}
    .menu ul li {float:left;position:relative;display:inline;}
    .menu ul li a, .menu ul li a:visited {float:left;display:block;text-
    
    decoration:none;color:#000;auto;color:#000;border:1px solid #fff;border-0 1px 0 0;padding:0px 16px 
    
    0px 16px;line-height:25px;}
    * html .menu ul li a, .menu ul li a:visited {auto;w\idth:auto;}
    .menu ul li ul {display:none;}
    table {margin:-1px;border-collapse:collapse;font-size:11px;}
    .menu ul li:hover a {color:#fff;background:#ccc url(http://www.webdm.cn/images/20090920/bgon2_a.gif) top left 
    
    repeat-x;}
    .menu ul li:hover ul {display:block;position:absolute;top:24px;margin-top:1px;left:0;100%;border-top:1px 
    
    solid #fff;}
    .menu ul li:hover ul li a {display:block;background:#E9E9E9;color:#000;height:auto;line-height:16px;padding:2px 
    
    16px 2px 16px;120px;}
    .menu ul li:hover ul li a:hover {background:#896296;color:#fff;}
    </style>
    </head>
    
    <body>
    <!-- BEGIN Menu 
    Menu built at /
    -->
    <div class="menucontainer">
    <div class="menu">
    <ul>
    <li><a href="/" target="_blank">Home</a></li>
    <li><a href="http://www.webdm.cn" target="_self">About us</a></li>
    <li><a class="drop" href="/" target="_self">Services<!--[if IE 7]><!-->
    </a>
    <!--<![endif]-->
    <table><tr><td>
    <ul><li><a href="#" target="_self">Design</a></li><li><a href="http://www.webdm.cn" 
    
    target="_self">Webdm.cn</a></li><li><a href="#" target="_self">Analysis</a></li></ul></td></tr></table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>
    <li><a href="#" target="_self">Support</a></li>
    <li><a href="#" target="_self">Webdm.cn</a></li>
    <li><a href="#" target="_self">Contact Us</a></li>
    </ul>
    </div>
    </div>
    <!-- END Menu -->
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/ee59d032-3dab-4dc8-a8cb-46c8b31de765.html

  • 相关阅读:
    python Unittest中setUp与setUpClass的区别
    Python的range和xrange的区别
    Python列表中的列表元素(嵌套列表)访问
    python字符串转为列表
    python正则匹配
    Python自动化测试用例设计--自动化测试用例与手工测试用例区别与联系
    Python+Selenium学习--自动化测试模型
    Python+Selenium学习--cookie处理
    Python+Selenium学习--控制浏览器控制条
    Python+Selenium学习--下载文件
  • 原文地址:https://www.cnblogs.com/webdm/p/2000846.html
Copyright © 2020-2023  润新知