用js做导航栏菜单,隐藏的层显示不出来,被覆盖了!

JavaScript018

用js做导航栏菜单,隐藏的层显示不出来,被覆盖了!,第1张

好乱,没明白你的意思,图片应该是正常显示的,不是定位的,而导航触发出来的隐藏层才是定位的,这样定位层的级别当然比没有定位的图片级别高了,所以显示的隐藏层应该是覆盖图片的,这样才对,你还要怎样呢?除非你的图片也定位了。

<!DOCTYPE html>

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>RunJS 演示代码</title>

<script>

onload = function(){

var lis = ul.getElementsByTagName("li")

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

lis[i].onclick = function(){

window.dom ? window.dom.style.color = "black" : 0

this.style.color = "red"

window.dom = this

}

}

}

</script>

  </head>

<body>

    <ul id="ul">

<li>HTML属性</li>

<li>HTML事件</li>

<li>HTML音频</li>

<li>HTML画布</li>

</ul>

  </body>

</html>

看看这个如何,是否符合阁下要求?

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312">

<title></title>

<style type="text/css">

.menus{

float:left 

color:#0C0

font-size:18px

border:2px #0C0 solid

width:120px

height:40px

text-align:center

padding-top:20px

margin-right:-2px

}

.add{

float:left 

color:#999

background-color:#F8F8F8

font-size:32px

border:1px #CCC solid

border-left:2px #0C0 solid

width:120px

height:50px

text-align:center

padding-top:12px

cursor:pointer

}

</style>

<script type="text/javascript">

window.onload=function(){

var add1=document.getElementById("add")

add1.onclick=function(){

addElement()

}

}

var i=1

function addElement(){

var box=document.getElementById("box")

var oDiv=document.createElement("div")

oDiv.setAttribute("class","menus")

oDiv.appendChild(document.createTextNode(prompt("在此输入菜单名称")))

box.appendChild(oDiv)

i++

box.insertBefore(oDiv,box.childNodes[i])

}

</script>

</head>

<body>

<div id="box">

  <div class="menus">菜单名称</div>

  <div class="add" id="add"><b>+</b></div>

</div>

</body>

</html>