急~!!求救。。CSS下拉菜单问题,请大家帮忙啊!!

hack_ccsl 2008-09-09 02:50:21
我小菜一个,CSS和JAVASCRIPT都不太懂,现在给一个主页面加了一个CSS的下拉菜单,代码是网上找的。
现在遇到的问题是:高分辨率的情况下,手动更改窗口大小后,出现外面一层滚动条,里面又多了一个滚动条(里层的滚动条有我自定义的CSS,这是我想要的效果),
随着里层滚动条的移动,定义好的下拉菜单模块会错位。。不知道是怎么回事了,网上找了好多天,还没有解决,项目马上要上交了。请大家帮帮忙啊。。
小弟感激不尽。。。。。。。
我的页面结构有点乱,代码如下。
————————————————————————————————————————————————————————————
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
font-family:simsun,PMingliU,MS PGothic,Arial;
color: 595959;
font-size: 14px;
line-height: 18px;
background-image: url(/library/images/backgrand.jpg);
background-position: center top;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
OVERFLOW:auto;
SCROLLBAR-FACE-COLOR:#D4D0C7;
SCROLLBAR-HIGHLIGHT-COLOR: #002339;
SCROLLBAR-SHADOW-COLOR: #002339;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #002339;
SCROLLBAR-TRACK-COLOR: #fffafa;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff
}

* {
padding:0;
margin:0;
}

#navigation, #navigation li ul {
list-style-type:none;
}

#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link{
display:block;
text-decoration:none;
color:#ffffff;
width:138px;
height:25px;
line-height:25px;
border:1px solid #fff;
border-width:0px 1px 0px 1px;
background:#6D360D;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#ffffff;
width:138px;
height:25px;
line-height:25px;
border:1px solid #fff;
border-width:1px 1px 0px 1px;
background:#6D360D;
}
#navigation li a:hover {
color:#fff;
background:#CEC7B5;
}
#navigation li ul li a:hover {
color:#fff;
background:#CEC7B5;
}
#navigation li ul {
display:none;
position: absolute;
top:25px;
left:0;
margin-top:1px;
width:138px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:0px;
left:138px;
margin-top:0;
margin-left:1px;
width:138px;
}

.main {
HEIGHT: auto;
//min-height:600px;
WIDTH: 1000px;
OVERFLOW: hidden;

}

.headleft {
float:left;
HEIGHT: 94px;
WIDTH: 710px;
overflow:hidden;


}
.headright {
font-family:simsun,PMingliU,MS PGothic,Arial;
color: 595959;
font-size: 14px;
line-height: 18px;
float:left;
HEIGHT: 94px;
WIDTH: 290px;
overflow:hidden;
background:#CCCC99;

}
.headbottom {
float: left;
HEIGHT: 100%;
WIDTH: 1000px;
overflow:hidden;
}
.center1{
float:left;
height:auto;
HEIGHT: 470px;
min-height:470px;
WIDTH: 1000px;
}

.foot {
width:1000px;
height:50px;
font-size: 12px;
color:#FFFFFF;
line-height: 18px;
background: #6D360D;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
OVERFLOW:hidden;
float:left;
}
</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>
<center>
<div class="main">
<div style="width:100%; height:94px">
<iframe width="100%" height="100%" frameborder="0" src="topnew.jsp">
</iframe>
</div>
<div id="headbottom" class="headbottom">
<table width="100%" height="29" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td scope="col" width="141" height="29" nowrap><a href="1.html" target="bottomFrame"><img id="an_1_1.jpg" src="an_1_1.jpg "width="141" height="29" border="0" onClick="skip(1)"></a></td>

<td scope="col" width="141" height="29" nowrap><a href="2.html" target="bottomFrame"><img id="an_2_1.jpg" src="an_2_1.jpg" width="141" height="29" border="0" onClick="skip(2)"></a></td>

<td scope="col" width="141" height="29"><a href="3.html" target="bottomFrame"><img id="an_3_1.jpg" src="an_3_1.jpg" width="141" height="29" border="0" onClick="skip(3)"></a></td>

<td scope="col" width="141" height="29"><a href="4.html" target="bottomFrame"><img id="an_4_1.jpg" src="an_4_1.jpg" width="141" height="29" border="0" onClick="skip(4)"></a></td>
<td height="29" width="141" ><ul id="navigation">
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> <a href="#">帮助</a>
<ul>
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> <a href="#">1</a>
<ul>
<li><a href="#" target="_blank">1.1</a></li>
<li><a href="#" target="_blank">1.2</a></li>
<li><a href="#" target="_blank">1.3</a></li>
</ul>
</li>
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> <a href="#">2</a>
<ul>
<li><a href="#" target="_blank">2.1</a></li>
<li><a href="#" target="_blank">2.2</a></li>
<li><a href="#" target="_blank">2.3</a></li>
</ul>
</li>
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"> <a href="#">3</a>
<ul>
<li><a href="#" target="_blank">3</a></li>
<li><a href="#" target="_blank">3</a></li>
<li><a href="#" target="_blank">3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td scope="col" height="29" width="100%">
<img id="tiao.jpg" src="tiao.jpg" width="100%" height="29" border="0" ></td>
</tr>
</table>
</div>
<div id="center1" class="center1">
<iframe name="bottomFrame" id="centerframe" src="news/center.jsp" width="1000" height="470" scrolling="no" frameborder="0"> </iframe>
</div>
<div id="foot" class="foot" >
<table width="1000" height="50" cellpadding="0" ccellspacing="0" border="0">
<tr align="center">
<td><span style="font-size:12px; color:#FFFFFF">Ȩ</span></td>
</tr>
<tr align="center">
<td ><span style="font-size:12px; color:#FFFFFF">֧</span></td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>
——————————————————————————————————————————————————
...全文
137 点赞 收藏 8
写回复
8 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
includezoluo 2008-11-17
<!DYOCTPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

DYOCTPE 是声明部分 用来说明你用的XHTML 或 HTML是什么版本 除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
回复
乌云 2008-11-17
把 class的名字换一下,基本上都是IE的保留字段,在低版本下不读的
回复
bolm 2008-09-10
http://bolm.cn/design_online.php

纯CSS实现的弹出菜单(PopMenu)
二级dropdown弹出菜单 三级dropdown弹出菜单 竖向三级弹出菜单 水平三级横向弹出菜单-dropline 水平三级横向弹出菜单-dropline


--------------------------------
http://bolm.cn (WEB设计驱动力!)
回复
hack_ccsl 2008-09-10
2楼的朋友,你的不是我想要的效果..
我想要这样的.
<div><iframe></iframe</div>
<div class="menu"> </div>
<div><iframe></iframe</div>
另外我发现在的代码.如果把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
这两句去掉.下拉菜单就弹不出来了..不知道怎么回事啊.
不知道大家能帮我解决下吗???
真的很急..各位大侠多多帮忙啊...................
回复
alice126 2008-09-10
楼上的代码在IE6下没有效果,下拉菜单出不来
回复
WzSzm 2008-09-10
你的好复杂,我也在网上找过一个,但比较简单的,和你的效果差不多,分享一下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- www.div-css.com 网站标准化 2007-4-16 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.div-css.com 网站标准化</title>

<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}
.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}
</style>
</head>

<body>

<div class="menu">
<ul>
<li><a href="">XHTML/CSS
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">标准</a></li>
<li><a href="">教程</a></li>
<li><a href="">技术文章</a></li>
<li><a href="">常见问题</a></li>
<li><a href="">布局教程专题</a></li>
<li><a href="">CSS菜单</a></li>
<li><a href="">浏览器兼容</a></li>
<li><a href="">滚动条相关</a></li>
<li><a href="">圆角矩形专题</a></li>
<li><a href="">CSS特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">AJAX
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">AJAX教程</a></li>
<li><a href="">AJAX技术</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">Javascript
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">JSON</a></li>
<li><a href="">技术文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
回复
hack_ccsl 2008-09-10
没有人来指点一下啊??
回复
hack_ccsl 2008-09-10
楼上几位的方法和参考意见我都试了.
问题还没有解决啊..
有没有哪个朋友帮我看下我的代码.看看问题出在哪了...
谢了啊!!!!!!!!!!!!
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2008-09-09 02:50
社区公告
暂无公告