• 很漂亮的蓝色CSS下拉菜单


    代码简介:

    纯CSS代码实现比较经典的蓝色风格下拉菜单,最多支持两级,适用于各种企业网站,新闻资讯类网站,效果挺棒的,不是吗?虽然没有用到过多的修饰,但给你的感觉清新、大方、简洁,符合现代网站的特点。

    代码内容:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>很漂亮的蓝色CSS下拉菜单_网页代码站(www.webdm.cn)</title>
    <style>
    *{margin:0;padding:0;border:0;}
    #div_center { 790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}  
    #nav { line-height: 20px; list-style-type: none; margin-top:5px;} 
    #nav a { display: block;  77px; text-align:center; font-size:12px;} 
    #nav a:link  { color:#FFF; text-decoration:none;margin:0;} 
    #nav a:visited  {color:#FFF;text-decoration:none;margin:0;}
    #nav a:hover {color:#C00;text-decoration:none;}
    #nav li {float: left;}
    #nav li a:hover{background:#FFFFFF;} 
    #nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; 132px; position: absolute;border-
    
     1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; 
    
    padding:1px;} 
    #nav li ul a{display:block;  130px;text-align:left;padding-left:2px;} 
    #nav li ul a:link  {color:#0d5097; text-decoration:none;}  
    #nav li ul a:visited  {color:#0d5097;text-decoration:none;}  
    #nav li ul a:hover  {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}
    #nav li:hover ul {left: auto;}
    #nav li.sfhover ul {left: auto;}
    #content {clear: left;}
    </style>
    <body>
    <script type=text/javascript>
    <!--
    function menuFix() {
        var sfEls = document.getElementById("nav").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            sfEls[i].onMouseDown=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            sfEls[i].onMouseUp=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
            sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
    "");
            }
        }
    }
    window.onload=menuFix;
    //--></script>
    
    </head>
    <body>
    <div id=div_center>
    <UL id=nav>
    <LI style="MARGIN-LEFT: 10px"><A href="http://www.webdm.cn">主站索引</A></LI>
    <LI><A href="#">新闻中心</A> 
    <UL>
    <LI><A href="#">·新闻中心1</A></LI>
    <LI><A href="#">·新闻中心3</A></LI></UL></LI>
    <LI><A href="#">企业简介</A> 
    <UL>
    <LI><A href="#">·企业简介</A></LI>
    <LI><A href="#">·产品中心</A></LI>
    <LI><A href="#">·服务专区</A></LI></UL></LI>
    <LI><A href="#">文章中心</A> 
    <UL>
    <LI><A href="#">·文章中心</A></LI>
    <LI><A href="#">·文章中心</A></LI></UL></LI>
    <LI><A href="#">国际新闻</A> 
    <UL>
    <LI><A href="#">国际新闻</A></LI>
    <LI><A href="#">国内新闻</A></LI>
    <LI><A href="#">科技新闻</A></LI></UL></LI>
    <LI><A href="#">图片新闻</A> 
    <UL>
    <LI><A href="#">·图片中心</A></LI>
    <LI><A href="#">·图片中心</A></LI></UL></LI>
    <LI><A href="#">下载中心</A> 
    <UL>
    <LI><A href="#">·常用软件</A></LI>
    <LI><A href="#">·文档下载</A></LI>
    <LI><A href="#">社区论坛</A></LI></UL>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/8d78676f-2ee7-442e-ac84-be07bde4d77f.html

  • 相关阅读:
    css控制textarea固定大小不可拖动
    js绑定回车事件
    这一周的收获与总结_BP
    20140824
    【转】Hadooop学习笔记
    【转】CUDA优化小记录
    【转】CUDA程序优化要点
    cublas 矩阵相乘API详解
    CUDA 矩阵相乘完整代码
    CUDA 矩阵相乘
  • 原文地址:https://www.cnblogs.com/webdm/p/2061870.html
Copyright © 2020-2023  润新知