Problem with IE8 Horizontal list - css

Question

I have a menu bar..it appears correctly(horizontal) in mozilla and chrome but appears vertical in IE8.
how can i make it horizontal using css
here is the html code
<div id="navigation">
<div id="myjquerymenu" class="jquerycssmenu">
<br/>
<ul>
<li class="txtfont">Manage Image</li>
<li class="txtfont">Manage Menu
<ul>
<li class="txtfont">Manage Parent Menu</li>
<li class="txtfont">Manage Sub Menu</li>
<li class="txtfont">Manage Sub Sub Menu</li>
</ul>
</li>
<li class="txtfont">Manage Content
<ul>
<li class="txtfont">Main Content</li>
<li class="txtfont">News</li>
<li class="txtfont">Announcements</li>
</ul>
</li>
<li class="txtfont">Manage FAQ</li>
<li class="txtfont">Manage Settings</li>
<li>Log Out</li>
</ul>
</div>
</div>
The css code is as below:
#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

Since there is no code to analyze at this point in time, here are my thoughts...
If you're using display: inline-block; I know this doesn't work in IE7. However, it should work in IE8, FF, Chrome.
You may want to try float: left; on the menu items to see if that fixes your problem.

Answer 2

Your problem as described is not evident in IE8.. for me in IE8 using the code as posted (adding the missing closing tags and another menu level) the menu is horizontal
however I've tidied up the code as there was a large horizontal scroll in all browsers and "sticky" hover bugs in IE7 so maybe there's a difference somewhere, that will fix IE8 for you too
Example Fiddle : here
This works (as in it looks the same, I'm not sure if it's your exact intention) - in all browsers tested in