Question

I have created a menu but cannot solve this issue so I am hoping that someone can help me:(

Problem my last li (anchor tag) inside my menu keeps collapsing underneath my menu and no matter I do problem persists. In Firefox looks fine but in every other browser it is a disaster…

I have tried: adding overflow:hidden; to my menuwrapper,tried adding a “clear both” div after last ul tag,added display:inline-block to li tags,and a lot of other approaches to my problem but nothing works:(
I didn’t set explicit width to my anchor tags (I really don’t want to do that!).
In Firefox looks like perfect:
http://robertpeic.com/kyani/template/menu.png

in other browsers look like this: (notice that there is no blue button because it came bellow my menu)
http://robertpeic.com/kyani/template/menu2.png

I dont want this:
http://robertpeic.com/kyani/template/menu3.png

Question: How can I prevent my li’s from going below my menu even if there is no room?
Thanks for your help!!

Link to my menu

Relevant CSS looks like this:

.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;
}

Html looks like:

<div class="mainmenu">
<ul>
<li><a href="#">Početna</a></li>
<li><a href="#">Ky&auml;ni</a></li>
<li><a href="#">Trokut zdravlja</a></li>
<li><a href="#">Poslovna prilika</a></li>
<li><a href="#">Info predavanja</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div><!--/mainmenu-->

Answer 1

I feel so dumb right now 🙂 To prevent my li from going below I’ve only wrapped my menu with other div and set that div to overflow hidden and it worked perfect! THX everybody for your help!!!

CSS now looks like:

.mainmenu{
 display:block;
 width:903px;
 }

 .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;
 }

.menuwrap{
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;
width:900px;
overflow:hidden;
}

HTML looks like this:

      <div class="menwrap">
      <div class="mainmenu">
      <ul>
      <li><a href="#">Početna</a></li>
      <li><a href="#">Ky&auml;ni</a></li>
      <li><a href="#">Trokut zdravlja</a></li>
      <li><a href="#">Poslovna prilika</a></li>
      <li><a href="#">Info predavanja</a></li>
      <li><a href="#">Kontakt</a></li>
      </ul>
      </div><!--/mainmenu-->
      </div><!--/menuwrap-->