zoukankan      html  css  js  c++  java
  • 深蓝渐变下拉菜单代码

    代码简介:很漂亮的深蓝色渐变的CSS下拉菜单,用到有两个修饰图片,预览效果请保存一下。这是纯CSS实现的,完全符合WEB标准,兼容所有IE浏览器,代码中有针对IE6的代码,已注释掉了,如果不需要可以删去。

    代码内容:

    <!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>深蓝渐变下拉菜单代码_网页代码站(www.webdm.cn)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <style>
    .menu {float:left;font-family: arial,verdana,sans-serif;100%;position:relative;font-size:11px;font-
    
    weight:bold;
    background:url(http://www.webdm.cn/images/20090920/bgoff1_f.gif) repeat-x;border-bottom:3px solid 
    
    #FF0066;/*bottom border color*/}
    .menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;}
    .menu ul li {float:left;position:relative;display:inline;background:url
    
    (http://www.webdm.cn/images/20090920/bgdir.gif) no-repeat bottom right;}
    
    /*style of main items normal state*/
    .menu ul li a, .menu ul li a:visited {float:left;display:block;text-
    
    decoration:none;color:#fff;auto;height:26px;padding:0px 16px 0px 16px;line-height:26px;}
    * html .menu ul li a, .menu ul li a:visited {auto;w\idth:auto;}
    
    /*hide sub nav items*/
    .menu ul li ul {display:none;}
    
    /*clear the main nav bg*/
    .menu ul li ul li{background:none;}
    
    /*style for table of sub nav items*/
    table {margin:-1px;border-collapse:collapse;font-size:11px;}
    
    /*specific to non IE browsers*/
    /*main nav over state*/
    .menu ul li:hover a {color:#fff;background-color:#131546;}
    
    /*show drop-down list*/
    .menu ul li:hover ul {display:block;position:absolute;top:25px;margin-top:1px;left:0;100%;}
    
    /*drop-down on state*/
    .menu ul li:hover ul li a {display:block;background:#131546;color:#fff;height:auto;line-height:15px;padding:2px 
    
    16px 2px 16px;120px;border-bottom:1px solid #fff;}
    
    /*sub drop-down over state*/
    .menu ul li:hover ul li a:hover {background:#22256D;color:#fff;}
    </style>
    <!--[if lte IE 6]>
    /*ie specific styles*/
    /*main nav over state*/
    .menu ul li a:hover {color:#fff;background-color:#131546;}
    /*positioning for sub nav*/
    /* / */
    .menu ul li a:hover ul {display:block;position:absolute;top:25px;left:0;background:#fff;margin-top:0;marg\in-
    
    top:1px;}
    /*drop-down on state*/
    .menu ul li a:hover ul li a {display:block;background:#131546;color:#fff;height:auto;line-
    
    height:15px;padding:2px 16px 2px 16px;130px;w\idth:120px;border-bottom:1px solid #fff;}
    /*drop-down over state*/
    .menu ul li a:hover ul li a:hover {background:#22256D;color:#fff;}
    <![endif]-->
    </head>
    
    <body>
    <!-- BEGIN Menu 
    Menu built at /
    -->
    <div class="menucontainer">
    <div class="menu">
    <ul>
    <li><a href="http://www.webdm.cn" target="_blank">Home</a></li>
    <li><a href="#" target="_self">About us</a></li>
    <li><a class="drop" href="http://www.webdm.cn" target="_self">Services<!--[if IE 7]><!-->
    </a>
    <!--<![endif]-->
    <table><tr><td>
    <ul><li><a href="http://www.webdm.cn" target="_self">Design</a></li><li><a href="#" 
    
    target="_self">Strategy</a></li><li><a href="/" target="_self">Analysis</a></li></ul></td></tr></table>
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    </li>
    <li><a href="http://www.webdm.cn" target="_self">Support</a></li>
    <li><a href="/" target="_self">Forums</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/6b71fbeb-d4f6-4926-8853-be20632dfe35.html

  • 相关阅读:
    treeview(树加载)
    9.SQL存储过程实例详解
    面向对象之封装
    cookie和session
    自定义web框架
    IO多路复用
    协程
    concurrent.futures模块(进程池/线程池)
    死锁与递归锁及信号量等
    并发编程之多线程
  • 原文地址:https://www.cnblogs.com/webdm/p/2000847.html
Copyright © 2011-2022 走看看