<分区>
<分区>
我设法将它置于 firefox 和 chrome 的中心，但它在 IE8 中不起作用。 还有一个滚动条出现在 IE8 的底部。 这里是网站 hugoth
这是 css:
ul {
font-family: Arial, Verdana;
font-size: 14px;
display:block;
padding: 0;
list-style: none;
width: 100%;
margin: 0px 0px 0px 40px;
padding: 0px 0px 0px 30px;
text-align: center
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
提前致谢
亚历克斯
最佳答案
我觉得很慷慨，所以我用更好的代码重新制作了您的整个页面(没有更多的嵌套表格用于布局)。
哦，我让你的菜单居中了。
如果您有任何问题，请告诉我。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hugoth</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0
}
body {
font: 12px Tahoma, sans-serif
}
#container {
margin: 0 auto;
width: 754px;
border-left: 2px solid #333;
border-right: 2px solid #333;
}
#header {
background: url(http://hugoth.com/test2/images/top.jpg) no-repeat;
height: 150px
}
#header h1 {
display: none
}
#content {
background: #666
}
#menu {
height: 40px
}
#middle {
clear: both;
margin: 0 auto;
width: 474px;
padding: 15px;
background: #fff;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 11px
}
#middle p {
margin: 21px 0
}
#middle .important {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold
}
#footer {
padding: 11px 0;
text-align: center;
color: #fff;
font-size: 11px
}
#footer a {
color: #f90;
text-decoration: none
}
#footer a:hover {
text-decoration: underline
}
/* dropdown section */
#menu {
font: 14px Arial, Verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
margin-left: 73px;
}
#menu ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none
}
#menu li {
display: block;
position: relative;
float: left
}
#menu li ul {
display: none
}
#menu li a {
display: block;
text-decoration: none;
color: #fff;
border-top: 1px solid #fff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-right: 1px;
/*white-space: nowrap*/
}
#menu li a:hover {
background: #617f8a
}
#menu li:hover ul {
display: block;
position: absolute
}
#menu li:hover li {
float: none;
font-size: 11px
}
#menu li:hover a {
background: #617f8a
}
#menu li:hover li a:hover {
background: #95a9b1
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Our Firm</a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Executive</a></li>
<li><a href="#">Board</a></li>
</ul>
</li>
<li><a href="#">Client Services</a>
<ul>
<li><a href="#">Internationalization</a></li>
<li><a href="#">Business Thriving Advisory Board</a></li>
<li><a href="#">Venture Engine: supporting start-ups and smaller companies</a></li>
<li><a href="#">Financial Services</a></li>
</ul>
</li>
<li><a href="#">Industry Practices</a>
<ul>
<li><a href="#">Clean Technology</a></li>
<li><a href="#">Med Technology</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="./" class="dir">Useful Links</a></li>
<li><a href="./" class="dir">Contact</a></li>
</ul>
<div id="middle">
<p class="important">This site is under construction</p>
<p class="important">Hügoth AB<br />Scheelevägen 15<br />223 70 Lund, Sweden</p>
<p>For questions or other matters please contact any of the below: </p>
<p>Bo Unéus • + 46 (0)70 - 6773656 • bo.uneus@hugoth.com</p>
<p>Lottie Norrsén • + 46 (0)70 - 4248321 • lottie.norrsen@hugoth.com</p>
<p>org.nr. 556306-0986</p>
</div>
<div id="footer">
www.hugoth.com © 2011 • Privacy Policy • <a href="mailto:webmaster@hugoth.com">webmaster@hugoth.com</a>
</div>
</div>
</div>
</body>
</html>
关于css - 如何让这个下拉菜单在IE8中居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5083462/