• DIV实现下拉菜单


    <html>

    <body>
    <style>
    /*下拉菜单样式*/
    *{margin:0;padding:0;border:0;}
    #div_center { 790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}  /*定义总体宽度、高度;background:003399; 控制背景颜色,居中对齐*/ 
    #nav { line-height: 20px; list-style-type: none; margin-top:5px;}         /*控制一级菜单行高;上边距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;}             /*二级菜单总体样式:行高24px;背景颜色;外框宽度;相对位置;边框一个象素,上边没样式,左右下边实线,边框颜色#003399;内边距1个象素*/
    #nav li ul a{display:block; 130px;text-align:left;padding-left:2px;}                 /* 二级菜单链接样式;背景宽度、左对齐,左缩进2 */
    #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>
    <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>
    <div id=div_center>
    <UL id=nav>
    <LI style="MARGIN-LEFT: 10px"><A href="http://www.cbcbuy.com">网站首页</A></LI>
    <LI><A href="http://www.cbcbuy.com">新闻中心</A> 
    <UL>
    <LI><A href="http://www.cbcbuy.com">·新闻中心1</A></LI>
    <LI><A href="http://www.cbcbuy.com">·新闻中心2</A></LI>
    <LI><A href="http://www.fengoo.com">·新闻中心3</A></LI></UL></LI>
    <LI><A href="http://www.cbcbuy.com">企业简介</A> 
    <UL>
    <LI><A href="http://www.cbcbuy.com">·企业简介1</A></LI>
    <LI><A href="http://www.cbcbuy.com">·企业简介2</A></LI>
    <LI><A href="http://www.cbcbuy.com">·企业简介3</A></LI>
    <LI><A href="http://www.cbcbuy.com">·企业风采4</A></LI>
    <LI><A href="http://www.cbcbuy.com">·企业简介5</A></LI>
    <LI><A href="http://www.cbcbuy.com">·企业简介6</A></LI></UL></LI>
    <LI><A href="http://www.cbcbuy.com">文章中心</A> 
    <UL>
    <LI><A href="http://www.cbcbuy.com">·文章中心</A></LI>
    <LI><A href="http://www.cbcbuy.com">·文章中心</A></LI>
    <LI><A href="http://www.cbcbuy.com">·文章中心</A></LI>
    <LI><A href="http://www.cbcbuy.com">·文章中心</A></LI>
    <LI><A href="http://www.cbcbuy.com">·文章中心</A></LI></UL></LI>
    <LI><A href="http://www.cbcbuy.com">国际新闻</A> 
    <UL>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI>
    <LI><A href="http://www.cbcbuy.com">·国际新闻</A></LI></UL></LI>
    <LI><A href="http://www.cbcbuy.com">图片中心</A> 
    <UL>
    <LI><A href="http://www.cbcbuy.com">·图片中心</A></LI>
    <LI><A href="http://www.cbcbuy.com">·图片中心</A></LI>
    <LI><A href="http://www.cbcbuy.com">·图片中心</A></LI></UL></LI>
    <LI><A href="http://www.cbcbuy.com">下载中心</A> 
    <UL>
    <LI><A href="http://www.cbcbuy.com">·常用软件</A></LI>
    <LI><A href="http://www.cbcbuy.com">·文档下载</A></LI>
    <LI><A href="http://www.cbcbuy.com">·资料下载</A></LI></UL></LI>
    <LI><A href="http://www.cbcbuy.com">留言中心</A></LI>
    <LI><A href="http://www.cbcbuy.com">社区论坛</A></LI></UL>
    </div>
    </body>
    </html>
  • 相关阅读:
    如何根据工单状态判断订单状态
    jquery移除click事件
    mysql字符串相关函数(并与sql server对比)
    bootstrap-table api
    js调用jquery的function函数
    Bootstrap table设置th,td内容水平、垂直居中
    Error:java: 无法访问javax.servlet.Servlet 找不到javax.servlet.Servlet的类文件
    html常用表单元素,按钮
    点击重置按钮,清空表单所有内容
    bootstrap table设置列宽
  • 原文地址:https://www.cnblogs.com/tangself/p/1658596.html
Copyright © 2020-2023  润新知