如何让这个下拉菜单在IE8中居中？

发布于 2024-10-18 20:38:54 字数 1060 浏览 1 评论 0原文

我设法将其在 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; }

提前感谢

Alex

原文

ive managed to center it in firefox and chrome but it doesnt work in IE8.
Also a scrollbar appers att the bottom in IE8.
Here the site hugoth

and heres the 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; }

Thanks in advance

Alex

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨与橙与城 2024-10-25 20:38:54

我感觉很慷慨，所以我用更好的代码重新制作了您的整个页面（不再需要嵌套表格进行布局）。

现场演示

哦，我还为你将菜单居中。

如果您有任何疑问，请告诉我。

<!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 • [email protected]</p>
            <p>Lottie Norrsén  • + 46 (0)70 - 4248321 • [email protected]</p>
            <p>org.nr.  556306-0986</p>
        </div>
        <div id="footer">
            www.hugoth.com © 2011 • Privacy Policy • <a href="mailto:[email protected]">[email protected]</a>
        </div>
    </div>
</div>

</body>
</html>

I was feeling generous, so I remade your entire page with better code (no more nested tables for layout).

Live Demo

Oh, and I centered your menu for you.

If you have any questions, let me know.

<!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 • [email protected]</p>
            <p>Lottie Norrsén  • + 46 (0)70 - 4248321 • [email protected]</p>
            <p>org.nr.  556306-0986</p>
        </div>
        <div id="footer">
            www.hugoth.com © 2011 • Privacy Policy • <a href="mailto:[email protected]">[email protected]</a>
        </div>
    </div>
</div>

</body>
</html>

回复收藏 0 原文