Forum Moderators: not2easy
Having a problem with a horizontal menu in IE 6 (works fine in IE 7 and Firefox), the items line-up one underneath the other instead of in a horizontal bar across. Here is the code:
[2]
#menuh-container
{
margin:auto auto;
position:relative;
}
#menuh
{
float:none;
font-size: small;
font-family: arial, helvetica, sans-serif;
width:910px;
background:url("../design/nav.gif") 0 0 repeat-x;
}
#menuh a
{
text-align:left;
border: 0px solid #555;
white-space:nowrap;
padding:0.5em 14px 0.5em 14px;
background:url("../design/nav-link.gif") 0% 100% repeat-y;
}
#menuh a:link, #menuh a:visited, #menuh a:active
{
color:white;
text-decoration:none;
}
#menuh a:hover/* menu at mouse-over */
{
color: white;
text-decoration:underline;
}
#menuh a.top_parent, #menuh a.top_parent:hover
{
float:left;
display:inline;
}
#menuh a.link, #menuh a.link:hover
{
width:17em;
border:1px solid #CCCCFF;
font-size:0.9em;
padding:0.2em;
background:#333399;
}
[/2]Would this have anything to do with #menuh having a "float:none;" in it? Because taking that out makes the menu disappear entirely!
If it's the typical <ul><li><a> construction, then take a look at the li's IE has a tendency not to collapse them due to them having only floated children. (float the <li>s too in the conditional comment to get rid of them)
Html that goes along with this is as follows:
<div id="menuh">
<ul>
<li><a href="#" class="top_parent">topmenu1</a></li>
</ul>
<ul>
<li><a href="#" class="top_parent">topmenu2</a>
<ul>
<li><a href="#" class="link">submenu2.1</a></li>
<li><a href="#" class="link">submenu2.2</a></li>
<li><a href="#" class="link">submenu2.3</a></li>
<li><a href="#" class="link">submenu2.4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" class="top_parent">topmenu3</a>
<ul>
<li><a href="#" class="link">submenu3.1</a></li>
<li><a href="#" class="link">submenu3.2</a></li>
<li><a href="#" class="link">submenu3.3</a></li>
<li><a href="#" class="link">submenu3.4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" class="top_parent">topmenu4</a>
<ul>
<li><a href="#" class="link">submenu4.1</a></li>
<li><a href="#" class="link">submenu4.2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" class="top_parent">topmenu5</a>
<ul>
<li><a href="#" class="link">submenu5.1</a></li>
<li><a href="#" class="link">submenu5.2</a></li>
<li><a href="#" class="link">submenu5.3</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" class="top_parent">topmenu6</a>
</li>
</ul>
</div>
Any ideas?
