Question

I am using a Html navigation menu on a website using the standard UL LI approach. But the problem is that when I resize the browser window the menu is resized and menu items outside the viewable area are shifted downwards. Has any on faced a similar problem?
Html

<div style="margin-top: 11px; display: block;" class="menubar">
<ul class="tabs">
            <li ><a  href="#">Menu1</a></li>
            <li><a  href="#">Menu2</a></li>
            <li><a  href="#">Menu3</a></li>
            <li><a  href="#">Menu4</a></li>
            <li><a  href="#">Menu5</a></li>
            <li><a  href="#">Menu6</a></li>

</ul>
</div>

CSS

 .menubar {
background: url("images/bg.png") repeat scroll left top #222222;
border-bottom: 1px solid #B2D7FC;
border-top: 1px solid #B2D7FC;
color: #FFFFFF;
float: left;
height: 35px;
margin: 10px 0 0;
padding: 0 2%;
width: 96%;
}
ul.tabs {
display: block;
list-style-type: none;
margin: 5px 0 0;
padding: 0;
}
ul.tabs li {
background: url("images/tab_right.png") no-repeat scroll right top transparent;
float: left;
padding: 0;
position: relative;
}

Answer 1

Please define its width if you are not given like

div
 { width:size %/px/em;
   min-width:%/px/em;
   position:absolute;
  }