CSS 怎么导航栏显示出来的下拉菜单会将页面撑开了
<!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=gb2312" />
<title>多级下拉菜单</title>
</head>
<body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function showMenu(itid){
inid = $(itid);
inid.style.display='inline';
inid.onmouseout=hide;
function hide(){
inid.style.display='none';
}
}
</script>
<style type="text/css">
li{
overflow: hidden;
text-align:center;
}
div,ul,a{
}
#nav{
}
#nav2{
display:none;
}
#nav3{
display:none;
}
#nav4{
display:none;
}
.abc{
float:left;
}
</style>
<div id="nav">
<ul class="navfst">
<li id ='li1' class='abc'><a>首页</a></li>
<li id ='li2' class='abc' onmouseover="showMenu('nav2')"><a>蜀国</a>
<ul id ='nav2' class="navse">
<li id ='li21'><a>谋士</a>
<ul class="navth">
<li><a>诸葛亮</a></li>
<li><a>庞统</a></li>
</ul></li>
<li id ='li22'><a>战将</a>
<ul class="navth">
<li><a>关羽</a><li>
<li><a>张飞</a><li>
</ul></li>
</ul>
</li>
<li id ='li3' class='abc' onmouseover="showMenu('nav3')"><a>魏国</a>
<ul id='nav3' class="navse">
<li id ='li31'><a>谋士</a>
<ul class="navth">
<li><a>司马懿</a></li>
<li><a>贾诩</a></li>
</ul></li>
<li id ='li32'><a>战将</a>
<ul class="navth">
<li><a>邓艾</a><li>
<li><a>钟会</a><li>
</ul></li>
</ul>
</li>
<li id ='li4' class='abc' onmouseover="showMenu('nav4')"><a>吴国</a>
<ul id = 'nav4' class="navse">
<li><a>谋士</a>
<ul class="navth">
<li><a>周瑜</a></li>
<li><a>陆逊</a></li>
</ul></li>
<li><a>战将</a>
<ul class="navth">
<li><a>甘宁</a><li>
<li><a>黄盖</a><li>
</ul></li>
</ul>
</li>
</ul>
</div>
</br>1234567890asdfghjkl;''qwertyuiopppp[]zaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多级下拉菜单</title>
</head>
<body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function showMenu(itid){
inid = $(itid);
inid.style.display='inline';
inid.onmouseout=hide;
function hide(){
inid.style.display='none';
}
}
</script>
<style type="text/css">
li{
overflow: hidden;
text-align:center;
}
div,ul,a{
}
#nav{
}
#nav2{
display:none;
}
#nav3{
display:none;
}
#nav4{
display:none;
}
.abc{
float:left;
}
</style>
<div id="nav">
<ul class="navfst">
<li id ='li1' class='abc'><a>首页</a></li>
<li id ='li2' class='abc' onmouseover="showMenu('nav2')"><a>蜀国</a>
<ul id ='nav2' class="navse">
<li id ='li21'><a>谋士</a>
<ul class="navth">
<li><a>诸葛亮</a></li>
<li><a>庞统</a></li>
</ul></li>
<li id ='li22'><a>战将</a>
<ul class="navth">
<li><a>关羽</a><li>
<li><a>张飞</a><li>
</ul></li>
</ul>
</li>
<li id ='li3' class='abc' onmouseover="showMenu('nav3')"><a>魏国</a>
<ul id='nav3' class="navse">
<li id ='li31'><a>谋士</a>
<ul class="navth">
<li><a>司马懿</a></li>
<li><a>贾诩</a></li>
</ul></li>
<li id ='li32'><a>战将</a>
<ul class="navth">
<li><a>邓艾</a><li>
<li><a>钟会</a><li>
</ul></li>
</ul>
</li>
<li id ='li4' class='abc' onmouseover="showMenu('nav4')"><a>吴国</a>
<ul id = 'nav4' class="navse">
<li><a>谋士</a>
<ul class="navth">
<li><a>周瑜</a></li>
<li><a>陆逊</a></li>
</ul></li>
<li><a>战将</a>
<ul class="navth">
<li><a>甘宁</a><li>
<li><a>黄盖</a><li>
</ul></li>
</ul>
</li>
</ul>
</div>
</br>1234567890asdfghjkl;''qwertyuiopppp[]zaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html> 展开
展开全部
下拉菜单要 绝对定位，才不会影响后面的标签。
注意：下来菜单的容器标签，需要相对定位，否则绝对定位的下来菜单要在页面里乱跑的。
注意：下来菜单的容器标签，需要相对定位，否则绝对定位的下来菜单要在页面里乱跑的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
相对定位外加z-index:2可以解决
更多追问追答
追问
在下拉菜单的位置上,加了 position:relative;
z-index:2 还是不行阿~~~
追答
应该可以的。。可能哪里错了。代码不是自己写的看的最麻烦。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
设置一下下拉菜单的zoom值亲
追问
亲,好像跟zoom没关系~~~
追答
z-index+position:absolute就可以啦亲
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
