简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  •  
    您现在的位置:首页 >> JS >> 内容

    JS+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'headtitleCSS二级下拉导航菜单/......

      <!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二级下拉导航菜单</title>

    <meta http-equiv="content-type" content="text/html;charset=gb2312">

    <style type="text/css">

    body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}

    #mainNavBar{width:100%;background:#999;padding:10px 0;}

    #nav{width:760px;height:30px;margin:0 auto;}

    #nav ul{padding:0;margin:0;}

    #nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}

    #nav ul li a{display:block;color:#fff;text-decoration:none;}

    #nav ul li a:hover{font-weight:bold;background:#666;}

    #subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}

    #subNav a{text-decoration:none;font-weight:normal;display:block;}

    #subNav a:hover{color:#f00;background:#f00;}

    </style>

    </head>

    <body>

    <div id="mainNavBar">

    <div id="nav">

    <ul>

    <li>

    <a href="#">添加</a>

    <div id="subNav">

    <a href="#">日志</a>

    <a href="#">分类</a>

    </div>

    </li>

    <li>

    <a href="#">管理</a>

    <div id="subNav">

    <a href="#">分类</a>

    <a href="#">文章</a>

    </div>

    </li>

    <li>

    <a href="#">扩展</a>

    <div id="subNav">

    <a href="#">评论管理</a>

    <a href="#">留言管理</a>

    <a href="#">注销退出</a>

    </div>

    </li>

    </ul>

    </div>

    </div>

    <script language="javascript">

    var nav=document.getElementById("nav").getElementsByTagName("li");

    for(i=0;i<nav.length;i++){

    nav[i].onmouseover=function(){

    this.style.fontWeight="bold";

    this.style.overflow="visible";

    this.style.background="#666666";

    }

    nav[i].onmouseout=function(){

    this.style.fontWeight="normal";

    this.style.background="#999999"

    this.style.overflow="hidden";

    }

    }

    </script>

    </body>

    </html>

      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/7/7 发布时间:16:29:49 点击:334 
  • 上一篇:JS实现移动端可折叠导航菜单
  • 下一篇:js几秒以后倒计时跳转
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.33 Build 20.7.30(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020