zoukankan      html  css  js  c++  java
  • 国外漂亮银灰色CSS下拉菜单代码

    代码简介:CSS实现的下拉菜单,非常简洁简洁实用,美观大方,导航菜单没有必要搞那么复杂,只要让用户很方便的找到想要的内容就可以了,可以试下这一款。

    代码内容:

    <!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>
    .menucontainer{background: #fff url(http://www.webdm.cn/images/20090920/bgOFF2.gif) top left repeat-x;}
    /*basic menu styling*/
    .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/bgOFF2.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;height:24px;color:#000;border:1px solid #fff;border-0 1px 0 
    
    0;padding:0px 16px 0px 16px;line-height:24px;}
    * html .menu ul li a, .menu ul li a:visited {auto;w\idth:auto;}
    .menu ul li ul {display:none;}
    /*style for table of sub nav items*/
    table {margin:-1px;border-collapse:collapse;font-size:11px;}
    /*specific to non IE browsers*/
    .menu ul li:hover a {color:#fff;background:#ccc url(http://www.webdm.cn/images/20090920/bgON2.gif) top left 
    
    repeat-x;}
    .menu ul li:hover ul {display:block;position:absolute;top:23px;margin-top:1px;left:0;100%;border-top:1px 
    
    solid #fff;}
    /*/*/
    .menu ul li:hover ul li a {display:block;background:#757575;color:#fff;height:auto;line-height:16px;padding:5px 
    
    16px 5px 16px;120px;}
    .menu ul li:hover ul li a:hover {background:#202D3D;color:#fff;}
    </style>
    </head>
    
    <body>
    <div class="menucontainer">
    <div class="menu">
    <ul>
    <li><a href="/" target="_blank">Home</a></li>
    <li><a href="/" 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="/" 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="/" 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/b71f5c89-373c-4714-a03f-aa3c174e5e17.html

  • 相关阅读:
    jQuery EasyUI API 中文文档 可调整尺寸
    jQuery EasyUI API 中文文档 链接按钮(LinkButton)
    jQuery EasyUI API 中文文档 手风琴(Accordion)
    jQuery EasyUI API 中文文档 表单(Form)
    jQuery EasyUI API 中文文档 组合(Combo)
    jQuery EasyUI API 中文文档 布局(Layout)
    jQuery EasyUI API 中文文档 拆分按钮(SplitButton)
    jQuery EasyUI API 中文文档 菜单按钮(MenuButton)
    jQuery EasyUI API 中文文档 搜索框
    jQuery EasyUI API 中文文档 验证框(ValidateBox)
  • 原文地址:https://www.cnblogs.com/webdm/p/1997653.html
Copyright © 2011-2022 走看看