css - IE8水平列表的问题

Question

我有一个菜单栏..它在 mozilla 和 chrome 中显示正确(水平)，但在 IE8 中显示为垂直。 我如何使用 css 使其水平显示

这是html代码

<div id="navigation">
    <div id="myjquerymenu" class="jquerycssmenu">
        <br/>
        <ul>
            <li class="txtfont"><a href="#IMAGE#">Manage Image</a></li>
            <li class="txtfont"><a href="#">Manage Menu</a>
            <ul>
                <li class="txtfont"><a href="#PMENU#">Manage Parent Menu</a></li>
                <li class="txtfont"><a href="#MENU#">Manage Sub Menu</a></li>
                <li class="txtfont"><a href="#SUBMENU#">Manage Sub Sub Menu</a></li>
            </ul>
            </li>
            <li class="txtfont"><a href="#">Manage Content</a>
            <ul>
                <li class="txtfont"><a href="#ML#">Main Content</a></li>
                <li class="txtfont"><a href="#NEWS#">News</a></li>
                <li class="txtfont"><a href="#ANN#">Announcements</a></li>
            </ul>
            </li>
                <li class="txtfont"><a href="#FAQ#">Manage FAQ</a></li>
                <li class="txtfont"><a href="#SETTINGS#">Manage Settings</a></li>
                <li><a href="#logout#&action=logout">Log Out</a></li>
        </ul>
    </div>
</div>

css代码如下:

#navigation { height: 80px; width:200%; position: relative; padding-top:10px; padding-left:200px; float:none; font-size:12px; font-family: "Century Gothic"; font-weight:bold; }
.jquerycssmenu{

font-size:12px;
font-family: "Trebuchet MS", "sans-serif";
/*padding-left: 0px; offset of tabs relative to browser left edge*/
margin-top:25px;
color:#FFFFFF;
font-weight:normal;
border:#000000;

}

.jquerycssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jquerycssmenu ul li{
position: relative;
display: inline;
float: left;
border-bottom-color:#000000;
}

/*Top level menu link items style*/
.jquerycssmenu ul li a{
display: block;
padding: 6px 7px 6px 7px;
min-width:70px;
margin-right: 6px; /*spacing between tabs*/
border: 1px solid #000000;
border-bottom-width: 1;
color:#FFFFFF;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#330066;
/*background-color:#99CC00;*/
text-align:center;
/*background: url(../../images/admin/images/menu_bg.jpg);*/
background-color:#330066;
behavior: url(border-radius.htc);
}

.jquerycssmenu ul li a:hover{
background:#663399;
}

/*1st sub level menu*/
.jquerycssmenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
padding-top:0px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
display: list-item;
float: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
font-family: "Trebuchet MS", "sans-serif";
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
top: 0;
display: list-item;
float: none;
font-family: "Trebuchet MS", "sans-serif";
}

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{

font-family:"Trebuchet MS", "sans-serif";
font-size:13px;
font-weight:normal;
width: 160px; /*width of sub menus*/
background-color:#330066;
color:#FFFFFF;
padding: 6px 5px;
margin: 0;
border-top-width: 1;

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 1px;
}

.jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
background:#663399;
color: #ccc;
}

Answer 1

由于此时没有代码可以分析，以下是我的想法...

如果您正在使用 display: inline-block; 我知道这在 IE7 中不起作用。但是，它应该可以在 IE8、FF、Chrome 中运行。

您可能想在菜单项上尝试 float: left;，看看是否能解决您的问题。