本文将使用css+html+js实现横向菜单。具有多级弹出菜单下拉。

首先我们来看看效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgyOTE4Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

首先应该写html部分的代码，代码比較简单，代码例如以下：

<body>

    <div id="menu">

      <ul>

        <li><a href="#" id="current">首页</a></li>

        <li><a href="#">网页版式</a>

          <ul>

            <li><a href="#">自适应宽度</a></li>

            <li><a href="#">固定宽度</a></li>

          </ul>

        </li>

        <li><a href="#">web教程</a>

          <ul>

            <li><a href="#">新手入门</a></li>

            <li><a href="#">视频教程</a></li>

            <li><a href="#">常见问题</a></li>

          </ul>

        </li>

        <li><a href="#">web实例</a></li>

        <li><a href="#">经常使用代码</a></li>

      </ul>

    </div>

    <div  id="s1">

      <ul>

         <li><a href="#">软件project</a>

           <ul>

            <li><a href="#">java ee</a></li>

            <li><a href="#">c</a></li>

           </ul>

         </li>

         <li><a href="#">程序语言</a>

           <ul>

            <li><a href="#">android</a></li>

            <li><a href="#">java</a></li>

           </ul>

         </li>

      </ul>

    </div>

  </body>

接着写css的代码，代码中都有凝视，方便阅读和理解：

<style type="text/css">

body {

  font-family: Verdana; /*  字体*/

  font-size: 12px; /*  字体大小*/

  line-height: 1.5; /*行高  */

  }

a {

  color: #000; /* 正常时的颜色 */

  text-decoration: none; /*取消下划线  */

  }

a:hover {

color: #F00; /* 鼠标经过时显示的颜色 */

}

#menu {

  width:500px; /* div的宽度 */

  height:28px; /* 高度 */

  margin:0 auto; /* 水平居中 */

  border-bottom:3px solid #E10001;/*设置底端线  */

  }

#menu ul {

  list-style: none; /* 取消列表样式 */

  margin: 0px; /*外边距为0  */

  padding: 0px; /*内边距为0  */

  }

#menu ul li {

  float:left; /* 水平浮动 */

  margin-left:2px;/*左边外边距为2px  */

  }

#menu ul li a {

  display:block;

  width:87px;

  height:28px;

  line-height:28px;

  text-align:center;

  background:url(./m14.jpg) 0 0 no-repeat;

  font-size:14px;

  }

#menu ul li a:hover {

  background:url(./m13.jpg) 0 0 no-repeat;

  }

#menu ul li a#current {

  background:url(./m12.jpg) 0 0 no-repeat;

  font-weight:bold;

  color:#fff;

  }

#menu ul li ul {

  border:1px solid #ccc;

  display:none;

  position:absolute;

  }

#menu ul li ul li {

  float:none;

  width:87px;

  background:#eee;

  margin:0;

  }

#menu ul li ul li a {

  background:none;

  }

#menu ul li ul li a:hover {

  background:#333;

  color:#fff;

  }

#menu ul li:hover ul {

  display:block;

  }

#menu ul li.sfhover ul {

  display:block;

  }

#s1{

   background-color: pink;

   width:180px;

   border:2px solid red;

   position:relative;

   left:200px;

   top:190px;

   height:60px;

}

#s1 ul li{

  list-style-type: none;

  height:25px;

  width:50px;

  background-color: #0ff;

  float:left;

  margin:10px;

}

#s1 ul li ul{

  display:none;

  position:absolute;

}

#s1 ul li:HOVER ul{

    display:block;

    background-color: blue;

    margin:0px;

    padding:0px;

    /* width:100px; */

}

#s1 ul li.sfhover ul {

  display:block;

  margin:0px;

  padding:0px;

  }

#s1 ul li ul li{

   border:1px solid red;

   float:none;

   margin:0px;

   width:50px;

} 

</style>

完毕上面的步骤后，能够进行測试了，你会发现，上面的代码仅仅在谷歌浏览器能够操作正常。能够实现下拉菜单。可是在ie和其它的浏览器，不能正常使用下拉菜单，浏览器不兼容引起的，所以为了写出兼容全部浏览器的菜单，还需js代码的控制。js代码例如以下；

<script type="text/javascript">

  function menuFix() {

      var sfEls = document.getElementById("menu").getElementsByTagName("li");

      var sfEls2 = document.getElementById("s1").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"),

             "");

          };

          }

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

           sfEls2[i].onmouseover=function() {

           this.className+=(this.className.length>0?

" ": "") + "sfhover";

       };

           sfEls2[i].onMouseDown=function() {

           this.className+=(this.className.length>0?

" ": "") + "sfhover";

         };

          sfEls2[i].onMouseUp=function() {

         this.className+=(this.className.length>0?

" ": "") + "sfhover";

        };

        sfEls2[i].onmouseout=function() {

        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

             "");

          };

          }

 }

window.onload=menuFix;

</script>

如今就能够执行正常了，会出现本文開始显示的效果，因为是做測试的，所以有些css代码没有去掉，主要是方便调试

css+html+js实现多级下拉和弹出菜单的更多相关文章

  1. 一个css和js结合的下拉菜单，支持主流浏览器

    首先声明: 本人尽管在web前端岗位干了好多年,但无奈岗位对技术要求不高.html,css用的比較多,JavaScript自己原创的非常少,基本都是copy改动,所以自己真正动手写时,发现基础非常不坚 ...

  2. RaidoGroup+RadioButton模拟android下拉框弹出List

    引用 <上面的Hello world!是居左的,但是下面的文字却怎么都不能靠边.试了各种方法都不行.最后,无意中给RadioButton添加一个backgroud属性即可:<RadioBu ...

  3. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  4. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  5. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

  6. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  7. Web标准：八、下拉及多级弹出菜单

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

  8. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  9. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

随机推荐

  1. (转）oracle 启动监听 报“监听程序不支持服务” 解决

    转自 http://www.51testing.com/html/99/478599-842622.html 今天安装了oracle后,启动监听,报错如下:    启动tnslsnr: 请稍候... ...

  2. MySQL和SqlServer的区别

    一.查看表结构数量等mysql语句: -- 查看系统内所有数据库 show databases: -- 查询数据库内所有表 show tables; -- 显示表结构 desc 表名; sql ser ...

  3. 洛谷——P2241 统计方形（数据加强版）

    https://www.luogu.org/problem/show?pid=2241 题目背景 1997年普及组第一题 题目描述 有一个n*m方格的棋盘,求其方格包含多少正方形.长方形 输入输出格式 ...

  4. UVA10006 - Carmichael Numbers（筛选构造素数表+高速幂）

    UVA10006 - Carmichael Numbers(筛选构造素数表+高速幂) 题目链接 题目大意:假设有一个合数.然后它满足随意大于1小于n的整数a, 满足a^n%n = a;这种合数叫做Ca ...

  5. jqgrid 实现行编辑，表单编辑的列联动

    这个问题的场景相信大家都遇到过,比方有A,B,C三列,B,C列均为下拉框.可是C列的值是由B列的值来决定的.即C列中的值是动态变化的,变化的根据就是B列中你选择的值. 本文给出的是一个有用,简易快捷的 ...

  6. linux 内核源代码目录结构

    /arch:目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel CPU及与之相兼容体系结构的子目录.PC机一般都基于此目录. / ...

  7. 10.12 android输入系统_InputStage理论

    android应用程序对输入系统的处理分为多个阶段,我们把这些阶段称为InputStage 理论处理流程: (1)activity发给window,如果window不能处理,再由activity处理; ...

  8. 如何用Swift创建一个复杂的加载动画

    现在在苹果应用商店上有超过140万的App,想让你的app事件非常具有挑战的事情.你有这样一个机会,在你的应用的数据完全加载出来之前,你可以通过一个很小的窗口来捕获用户的关注. 没有比这个更好的地方让 ...

  9. python3报错

    这个错误是我在从Excel中导入数据,,x,y 和z(z代表了强度)  然后通过xyz画出一个二维的灰度图片所出现的错误 原因是因为用mcml生成的数据如: TypeError: cannot per ...

  10. jquery-ajax、struts2、json数据问题

    jquery代码: $.ajax({ url:url, type:'post', data:{"key1": "value1", "key2" ...