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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    .menucontainer{background: #fff url(http://www.webdm.cn/images/20090922/bgOFF.gif) no-repeat bottom left;}
    .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/20090922/bgOFF.gif) repeat-x bottom left;border-top:4px solid 
    
    #B30000;}
    .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/20090922/bgDIVIDER.gif) no-repeat bottom right;}
    .menu ul li a, .menu ul li a:visited {float:left;display:block;text-
    
    decoration:none;color:#000;auto;color:#666;padding:0px 16px 0px 16px;line-height:40px;height:40px;}
    * html .menu ul li a, .menu ul li a:visited {auto;w\idth:auto;}
    .menu ul li ul {display:none;}
    .menu ul li ul li{background:none;}
    table {margin:-1px;border-collapse:collapse;font-size:11px;}
    .menu ul li:hover a {color:#B30000;background: transparent url(http://www.webdm.cn/images/20090922/bgON.gif) 
    
    bottom left repeat-x;}
    .menu ul li:hover ul {display:block;position:absolute;top:36px;margin-top:1px;left:0;100%;border-top:1px 
    
    solid #fff;}
    .menu ul li:hover ul li a {display:block;background:#e3e3e3;color:#333;height:auto;line-height:16px;padding:2px 
    
    16px 2px 16px;120px;border-top:1px solid #fff;}
    .menu ul li:hover ul li a:hover {color:#fff;background: #B30000 url(http://www.webdm.cn/images/20090922/sub-
    
    arrow.gif) no-repeat;background-position: 4px 8px;}
    </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/e9614df6-97cd-4394-bf43-8d6ae3b437c9.html

  • 相关阅读:
    ExtJS小技巧
    Oracle 表的行数、表占用空间大小,列的非空行数、列占用空间大小 查询
    NPM 私服
    IDEA 不编译java以外的文件
    SQL 引号中的问号在PrepareStatement 中不被看作是占位符
    Chrome 浏览器自动填表呈现淡黄色解决
    批量删除Maven 仓库未下载成功.lastupdate 的文件
    Oracle 11g 监听很慢,由于监听日志文件太大引起的问题(Windows 下)
    Hibernate 自动更新表出错 建表或添加列,提示标识符无效
    Hibernate 自动更新表出错 More than one table found in namespace
  • 原文地址:https://www.cnblogs.com/webdm/p/2012223.html
Copyright © 2011-2022 走看看