I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions like adding overflow:hidden; to my menu wrapper, "clear both" div after the last ul tag, and display:inline-block to li tags - nothing seems to work. The problem persists even though I haven't set explicit width to my anchor tags (I really don't want to do that!). You can see how it looks in Firefox here: and in other browsers here: . I definitely don't want it to look like this:
Question: Can anyone help me prevent my li's from going below my menu even if there is no room? Any suggestions would be greatly appreciated!!
Link to my menu
Here's the relevant CSS code:
.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}
The HTML structure is as follows:
<div class="mainmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Kyani</a></li>
<li><a href="#">Triangle of Health</a></li>
<li><a href="#">Business Opportunity</a></li>
<li><a href="#">Event Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/mainmenu-->