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> 展开
还有个问题是选答题,解决后追加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个回答
展开全部
不要设置高度就可以了。
<!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><!--nav -->
</div>
</div>
</body>
</html>
<!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><!--nav -->
</div>
</div>
</body>
</html>
展开全部
你的代码兼容性不好,不一定在所有的浏览器上都可以正常显示。
去下面的链接,N多下拉菜单,也有我自己写的,也有我找的,你自己去找合适的。
去下面的链接,N多下拉菜单,也有我自己写的,也有我找的,你自己去找合适的。
参考资料: http://www.jsweb8.cn/plus/Search/Search.asp?KeyWord=%CF%C2%C0%AD&x=22&y=17
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
加我HI,我发一个很好用的给你
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询