请教IE6下CSS菜单显示的问题

szsailing 2007-05-17 12:11:43

我用div+css做了一个菜单，在firefox和IE7下都浏览正常，但是在IE6下，每次刷新菜单都会跑到页面左上角，直到鼠标在菜单上移动之后，才回到正确的位置。
请大家帮忙看看为什么会这样。
代码如下：
test.html
=======
<!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=UTF-8" />
<title>zzzzzzzzzzzzz</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

<script type="text/javascript" src="js/common.js"></script>
</head>
<body id="type-c">

<div id="wrap" align="center">
<div id="header">

<div id="site-logo">logo</div>

<div id="site-banner">Banner</div>
</div>
<div class="clear"></div>
<div id="topmenu">
<div id="topnav">
<ul id="nav">
<li class="first"><a href="#">Home</a></li>
<li class="active"><a href="#">Products</a>
<ul>
<li class="first"><a href="#">Maecenas</a></li>
<li class="active"><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li class="last"><a href="#">Mauris at enim</a></li>
</ul>
</li>
<li><a href="#">Client list</a>
<ul>
<li class="first"><a href="#">Maecenas</a></li>
<li><a href="#">Phasellus</a></li>
<li><a href="#">Mauris sollicitudin</a></li>
<li class="last"><a href="#">Mauris at enim</a></li>
</ul>
</li>

</ul>

</div>
<div id="chooselanguage">

Select Your Lanuage
<select>
<option value="">English</option>
<option value="">中文</option>
</select>
</div>
</div>


<div class="clear"></div>

</div>

</body>
</html>
===============
css文件中的代码如下：
=========
/* THE BIG GUYS */
* {margin:0;padding:0}
body {padding: 0 0 20px;background: #fff ;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer}
a:link {color:#c00}
a:visited {color:#999}
a:hover,a:active {color:#069}

/* FORMS */
form {margin: 0 0 1.5em}
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
fieldset {border: none}
label {display:block;padding: 5px 0}
label br {clear:left}

/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}

dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}

/* GENERAL */
img {border:none}
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px}

/* LAYOUT - HEADER */
#header {
width: 799px;
height: 100px;
/*background: #666 url("images/sprites.gif") repeat-x 0 100%;*/
background: #666;
margin: 0px;
padding: 0px;
}

#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
#header #site-logo {
float:left;
width: 200px;
height: 100px;
font: 265% arial;
letter-spacing: -.05em;
margin:0px;
padding:0px;
color:#ccc;
border:0px solid;
}
#header #site-banner {
float:right;
width: 599px;
height: 100px;
font: 265% arial;
letter-spacing: -.05em;
margin:0px;
padding:0px;
color:#ccc;
border:0px solid;
}
#topmenu {
width: 799px;
height: 30px;
background: #686;
}
#topmenu #topnav {
float:left;
width: 500px;
height: 30px;
background: #686;
}
#topmenu #chooselanguage {
float:right;
width: 299px;
height: 30px;
background: #686;
}
/* NAV - top horizontal nav */
#nav, #nav ul {padding: 0;margin: 0;list-style: none}
#nav {
font-weight:bold;
height:2.09em;
font: bold 96% arial;
margin: 0px;
}
#nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursor:pointer;color:#fff;display: block;padding: 4px 10px 2px}
#nav a:hover {color:#000}

#nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}

#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
#nav li li.last {border-bottom:none}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
#nav li li a:hover {color:#fff;background:#c00}

#nav li.active {background: #c00;border-bottom: 3px solid #c00}
#nav li.active ul {border:none;background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100%}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
#nav li.active a:hover {color:#000}

#nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
#nav li.active li.last {border-bottom: none}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
#nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}

#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}

/* hide from IE mac \*/
#nav li {width:auto}
/* end hiding from IE5 mac */

/* LAYOUT - main body of page */
#wrap {min-width:779px;max-width:779px;margin: 0 auto;position:relative}

...全文