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;，看看是否能解决问题。

Answer 2

你所描述的问题在IE8中并不明显..对于我来说，在IE8中使用代码发布（添加缺少的结束标记和另一个菜单级别）菜单是水平的

然而我已经整理了代码，因为所有浏览器都有一个大的水平滚动和IE7中的“粘性”悬停错误，所以也许在某个地方存在差异，这也会为你修复IE8

示例小提琴：here

这是有效的（因为它看起来一样，我不确定这是否是你的确切意图） - 在所有测试的浏览器中

IE8水平列表问题

2 个答案:

示例小提琴：here