急~!!求救。。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>
——————————————————————————————————————————————————
...全文
167 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
 回复
楼上几位的方法和参考意见我都试了.
问题还没有解决啊..
有没有哪个朋友帮我看下我的代码.看看问题出在哪了...
谢了啊!!!!!!!!!!!!
java 扫雷源代码 带有详细的注释
菜鸟练习~~ 加入了“求救”按钮，在无法继续通过计算扫雷时，可以点出此获知随机的一个未标记雷的位置； 加入了计时器； 加入了作弊功能……嘿嘿，按下键盘上的某键，可以知道所有雷的位置，吼吼
求救~！求救~！
要做一份毕业设计。应用ASP以及SQL的单位档案管理系统。想找高手帮忙。教偶弄此系统~！万分感谢~！
下拉框和文本框的问题~!!!!高手求救
<option value="2006">2006 <option value="2007">2007   我想用 select value="2006" 查询access中的 jinkihon 表 条件是 Name_CHN=option value的值 ... 高手求救啊 本人是采鸟啊 我已经研究好天了
maya前台渲染_maya前台渲染_maya前台渲染渲染不动！！！急求救！！！！！！！_maya前台渲染脚本...
急求救！！！！！！！_maya前台渲染脚本问题一直卡在这个界面，怎么都渲染不动。但是后台渲染没有问题，我没有办法进行前台测试很伤啊！！！求大神解答！！！最佳答案那就后台渲染，不用开软件的，上网查一下render...
百亿头部量化私募急招以下岗位 来来来~！应有尽有~! 校
完了，兄弟们，为啥boss上面根本没人理，大部分都是简历都不要，要了也是之后就不理了，还请各位大佬帮。小米暑期开面了吗，投的南京的岗，发现有一个志愿的岗已经没了，简历评估了一个多月了，有兄弟已经面过了吗。...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章