html弹出下拉,css+html+js实现多级下拉和弹出菜单

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

首先我们来看看效果图：

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

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

• 首页
• 网页版式
  • 自适应宽度
  • 固定宽度
• web教程
  • 新手入门
  • 视频教程
  • 常见问题
• web实例
• 经常使用代码

• 软件project
  • java ee
  • c
• 程序语言
  • android
  • java

接着写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;

}

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

function menuFix() {

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

var sfEls2 = document.getElementById("s1").getElementsByTagName("li");

for (var i=0; i

sfEls[i].οnmοuseοver=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].οnmοuseοut=function() {

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

"");

};

}

for (var i=0; i

sfEls2[i].οnmοuseοver=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].οnmοuseοut=function() {

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

"");

};

}

}

window.οnlοad=menuFix;

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