本文将使用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. Vue 自定义全局消息框组件

    消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...

  2. 【2017中国大学生程序设计竞赛 - 网络选拔赛 hdu 6150】Vertex Cover

    [链接]点击打开链接 [题意] 有人写了一个最小点覆盖的贪心算法,然后,让你去hack它. 并且,要求这个算法得到的错误答案,是正确答案的三倍. 让你任意输出hack数据,点数<=500 [题解 ...

  3. change_names

    DC在储存网表时,有时会采用特殊的字符 比如表示总线BUS[7]-BUS[0] 会表示成\BUS[7]    \BUS[6]...... 在compile命令之后,write命令之前  加上:chan ...

  4. 常用到的Linux命令

    记录一下日常用到的Linux命令,就当做日志了 1.查看Linux 端口号  netstat -apn | grep 80 2.杀死进程   kill -s 9 pid (tomcat 启动不起来有可 ...

  5. LA-3708 - Graveyard 简单的模拟一下即可

    一开始不知道在想啥,竟然写了个双重for循环的.T T一直WA,又没效率. T T然后在纸上模拟演算,改了,就AC了 以后做题果断要先模拟一下例子...能加深对题目的理解. 当教训吧..太懒导致写了好 ...

  6. 【Codeforces Round #440 (Div. 2) A】 Search for Pretty Integers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先枚举一个数字的情况. 再枚举两个数的情况就好. [代码] #include <bits/stdc++.h> #defi ...

  7. 【BZOJ 4516】生成魔咒

    [链接]h在这里写链接 [题意]     [Description]         给你n(n<=10^9)个数字,把它们依次,一个一个地添加在空串S的后面.         要求每添加一次之 ...

  8. The behavior of App killed or restored by Android System or by users

    What's the behavior of App killed or restored by Android System or by users? First, user kills the a ...

  9. Android多线程研究（8）——Java中的原子性理解

    一.什么是原子性 原子性是世界上最小单位,具有不可分割性.比如a=0;(a非long和double类型)这个操作是不可分割的,那么我们说这个操作是原子操作.再比如:a++;这个操作实际上是a=a+1; ...

  10. if..... if..... 和if..... else if.....

    曾经一度认为没有区别,,在有的时候是没有区别的,,但是有些时候则不可相互替换 这两个是有区别的 if..... if..... 是不相关的.只要各自判断两部分的条件即可,两个都会执行 if.... e ...