div+css下拉导航栏一个小问题

弹出的二级菜单超出<divid="header"></div>的部分就点不到了,怎么处理?还有个问题是选答题,解决后追加50分,就是我想让下拉菜单横着排列,并且永远和"日... 弹出的二级菜单超出<div id="header"></div>的部分就点不到了,怎么处理?
还有个问题是选答题,解决后追加50分,就是我想让下拉菜单横着排列,并且永远和"日志"对齐,怎么弄?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">

</script>
<style type="text/css">

#container{margin:0px auto;width:800px;}
#header{width:800px;height:130px;background:url(fj/bg.gif) repeat-x;}
#daoh{height:102px;
width:800px;}
#nav{
}
#nav ul{margin:0;padding:0;list-style:none;text-align:center;}
#nav ul li{float:left;}
#nav ul li a{text-decoration:none;
height:28px;
width:100px;
background-color:#CC99CC;
color:#9999FF;
font:16px;font-weight:bold;
margin:0 12px 2px 0px;
line-height:24px;
filter:alpha(opacity=20);
opacity:50;
display:block;
}
#nav ul li a:hover{filter:alpha(opacity=100);color:#FFF;}
#nav span{
position:relative;}
#nav li ul li{
float:none;}
#nav li ul{
display:none;}
#nav li:hover ul,.over ul { display:block;}
</style>
</head>

<body><div id="container">
<div id="header">
<div id="daoh"></div>
<div id="nav"><ul>
<li><a href="#"><div><span>日志</span></div></a>
<ul><li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li></ul></li>
<li><a href="#"><span>相册</span></a>
<ul><li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li></ul></li>
<li><a href="#"><span>收藏</span></a>
<ul><li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li></ul></li>
<li><a href="#"><span>留言</span></a>
<ul><li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li></ul></li>
</ul></div>
</div></div>

</body>
</html> 展开

 我来答

4个回答

#热议# 为什么说不要把裤子提到肚脐眼？

xue_seven
推荐于2016-03-06 · TA获得超过262个赞

知道小有建树答主

回答量：315

采纳率：0%

帮助的人：193万

我也去答题访问个人页

关注

展开全部

不要设置高度就可以了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">

</script>
<style type="text/css">
#container{margin:0px auto;width:800px;}
#header{width:800px;background:url(fj/bg.gif) repeat-x;}
#daoh{width:800px;}
#nav{
}
#nav ul{margin:0;padding:0;list-style:none;text-align:center;}
#nav ul li{float:left;}
#nav ul li a,#nav ul li ul li a{text-decoration:none;
height:28px;
width:100px;
background-color:#CC99CC;
color:#9999FF;
font:16px;font-weight:bold;
margin:0 12px 2px 0px;
line-height:24px;
filter:alpha(opacity=20);
opacity:50;
display:block;
}
#nav ul li a:hover{filter:alpha(opacity=100);color:#FFF;}
#nav span{
position:relative;}
#nav ul li li{
float:none;}
#nav ul li ul{
display:none;}
#nav ul li:hover ul,#nav ul li a:hover{ display:block;}
</style>
</head>

<body>

<div id="container">

<div id="header">

<div id="daoh"></div>

<div id="nav">
<ul>
<li><a href="#"><div><span>日志</span></div></a>
<ul>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
</ul>
</li>

<li><a href="#"><span>相册</span></a>
<ul>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
</ul>
</li>

<li><a href="#"><span>收藏</span></a>
<ul>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
</ul>
</li>

<li><a href="#"><span>留言</span></a>
<ul>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
<li><a href="#"><span>123</span></a></li>
</ul>
</li>
</ul>
</div>

</div>
</div>

</body>
</html>

已赞过 已踩过<

评论收起

穿皮鞋的青蛙
2010-01-28 · TA获得超过497个赞

知道小有建树答主

回答量：297

采纳率：0%

帮助的人：255万

我也去答题访问个人页

关注

展开全部

你的代码兼容性不好，不一定在所有的浏览器上都可以正常显示。
去下面的链接，N多下拉菜单，也有我自己写的，也有我找的，你自己去找合适的。

参考资料： http://www.jsweb8.cn/plus/Search/Search.asp?KeyWord=%CF%C2%C0%AD&x=22&y=17

已赞过 已踩过<

评论收起

yi_mzy
2010-01-28 · 超过34用户采纳过TA的回答

知道答主

回答量：143

采纳率：0%

帮助的人：65.3万

我也去答题访问个人页

关注

展开全部

加我HI，我发一个很好用的给你

已赞过 已踩过<

评论收起

dwl5240
2010-01-28 · 超过10用户采纳过TA的回答

知道答主

回答量：143

采纳率：0%

帮助的人：44.3万

我也去答题访问个人页

关注

展开全部

我的网址里有一个很不错的样式提供免费下载哟

参考资料： http://www.591zqq.cn

已赞过 已踩过<

评论收起

更多回答（2）

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

div+css下拉导航栏一个小问题

其他类似问题

为你推荐：