以下是我做的一个下拉导航菜单，测试时二级菜单和三级菜单都显示出来了，走一遍之后才正常运行

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉导航练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{list-style-type:none;}
body{background:#000;}

#nav{width:304px;margin:0px auto;}
.navul{height:40px;border:#F00 solid 1px;}
.navulli{width:150px;height:40px;display:block;float:left;border-left:#000 solid 1px;line-height:40px;text-align:center;font-size:14px;}
.navulliul{width:150px;}
.navulliulli{width:150px;height:40px;display:block;border-bottom:#000 solid 1px;line-height:40px;text-align:center;font-size:12px; position:relative;}

.nav-a{display:block;width:150px;height:40px;color:#666; text-decoration:none;background:#0FF;}
.nav-a:vasite{color:#666; text-decoration:none;}
.nav-a:hover{color:#CCC;text-decoration:underline;background:#9F0;}
.nav-a2{display:block;width:150px;height:40px;color:#666; text-decoration:none;background:#FFC;}
.nav-a2:vasite{color:#666; text-decoration:none;}
.nav-a2:hover{color:#CCC;text-decoration:underline;background:#F96;}
</style>
<script type="text/javascript">
function displaySubMenu(li)
{
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li)
{
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>

<body>
<div id="nav">
<ul class="navul">
<li class="navulli" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#" class="nav-a">栏目1</a>
<ul class="navulliul">
<li class="navulliulli"><a href="#" class="nav-a2">栏目1菜单1</a></li>
<li class="navulliulli"><a href="#" class="nav-a2">栏目1菜单2</a></li>
<li class="navulliulli"><a href="#" class="nav-a2">栏目1菜单3</a></li>
</ul>
</li>
<li class="navulli" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#" class="nav-a">栏目2</a>
<ul class="navulliul">
<li class="navulliulli"><a href="#" class="nav-a2">栏目2菜单1</a></li>
<li class="navulliulli"><a href="#" class="nav-a2">栏目2菜单2</a></li>
<li class="navulliulli"><a href="#" class="nav-a2">栏目2菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
QQ:724791250
嗯，这个我调好了，ul里面加“display：none”初始值是隐藏的展开

 我来答

2个回答

#热议# 不吃早饭真的会得胆结石吗？

cccyyy789
推荐于2016-01-17 · 超过11用户采纳过TA的回答

知道答主

回答量：41

采纳率：0%

帮助的人：47.6万

我也去答题访问个人页

关注

展开全部

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉导航练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{list-style-type:none;}
body{background:#000;}

#nav{width:304px;margin:0px auto;}
.navul{height:40px;border:#F00 solid 1px;}
.navulli{width:150px;height:40px;display:block;float:left;border-left:#000 solid 1px;line-height:40px;text-align:center;font-size:14px;}
.navulliul{width:150px;display:none;}
.navulliulli{width:150px;height:40px;display:block;border-bottom:#000 solid 1px;line-height:40px;text-align:center;font-size:12px; position:relative; }

.nav-a{display:block;width:150px;height:40px;color:#666; text-decoration:none;background:#0FF;}
.nav-a:vasite{color:#666; text-decoration:none; display:block;}
.nav-a:hover{color:#CCC;text-decoration:underline;background:#9F0; }
.nav-a2{display:block;width:150px;height:40px;color:#666; text-decoration:none;background:#FFC;}
.nav-a2:vasite{color:#666; text-decoration:none;}
.nav-a2:hover{color:#CCC;text-decoration:underline;background:#F96;}
</style>
<script type="text/javascript"> 
function displaySubMenu(li)
{
  var subMenu = li.getElementsByTagName("ul")[0]; 
  subMenu.style.display = "block"; 
} 
function hideSubMenu(li) 
{ 
  var subMenu = li.getElementsByTagName("ul")[0]; 
  subMenu.style.display = "none"; 
} 
</script>
</head>

<body>
<div id="nav">
<ul class="navul">
	<li class="navulli" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
        <a href="#" class="nav-a">栏目1</a>
    	<ul class="navulliul">
            <li class="navulliulli"><a href="#" class="nav-a2">栏目1菜单1</a></li>
            <li class="navulliulli"><a href="#" class="nav-a2">栏目1菜单2</a></li>
            <li class="navulliulli"><a href="#" class="nav-a2">栏目1菜单3</a></li>
        </ul>
    </li>
    <li class="navulli" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
        <a href="#" class="nav-a">栏目2</a>
        <ul class="navulliul">
            <li class="navulliulli"><a href="#" class="nav-a2">栏目2菜单1</a></li>
            <li class="navulliulli"><a href="#" class="nav-a2">栏目2菜单2</a></li>
            <li class="navulliulli"><a href="#" class="nav-a2">栏目2菜单3</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

你要的效果是这样吧


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

手机用户72102
2011-06-08

知道答主

回答量：2

采纳率：0%

帮助的人：3314

我也去答题访问个人页

关注

展开全部

lihai,heihei

更多追问追答

追问

哥们儿，能说汉语不，说句汉语这五分俺就送你了

追答

行，丰子，你给力！！！呵呵。。。

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

以下是我做的一个下拉导航菜单，测试时二级菜单和三级菜单都显示出来了，走一遍之后才正常运行

其他类似问题

为你推荐：