Проблема с 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

Ваша проблема, как описано, не очевидна в IE8 .. для меня в IE8, используя опубликованный код (добавление отсутствующих закрывающих тегов и другого уровня меню), меню горизонтальное

, однако я убралкод, поскольку во всех браузерах была большая горизонтальная прокрутка, и «липкие» ошибки при наведении курсора в IE7, так что, возможно, где-то есть разница, которая исправит IE8 и для вас

Пример Fiddle: здесь

Это работает (так как выглядит так же, я не уверен, что это ваше точное намерение) - во всех браузерах, протестированных в

Answer 2

Поскольку сейчас нет кода для анализа, вот мои мысли ...

Если вы используете display: inline-block; Я знаю, что это не работает в IE7.Тем не менее, он должен работать в IE8, FF, Chrome.

Вы можете попробовать float: left; в пунктах меню, чтобы посмотреть, решит ли это вашу проблему.