HTML/CSS menu bar dis miss it's shape when resizing window -

i made menubar picture below , contact item in left of company item , when resize browser contact goes down , problem? here picture http://oi61.tinypic.com/64h01g.jpg

html

<div id="header"><h1><center>online shopping</center></h1></div> <div id='cssmenu'>   <ul>    <li class='active'><a href='index.html'><span>home</span></a></li>    <li class='has-sub'><a href='#'><span>products</span></a>   <ul>      <li><a href='#'><span>widgets</span></a></li>      <li><a href='#'><span>menus</span></a></li>      <li class='last'><a href='#'><span>products</span></a></li>   </ul>   </li> <li class='has-sub'><a href='#'><span>company</span></a>   <ul>      <li><a href='#'><span>about</span></a></li>      <li class='last'><a href='#'><span>location</span></a></li>   </ul>  </li>  <li class='last'><a href='#'><span>contact</span></a></li>  </ul>  </div> 

css

body{ background:#ebebeb; } #header{ padding:0; margin:0; height:100px; background:#6355bd; } #cssmenu ul { margin: 0; padding: 7px 6px 0; background: #7d7d7d url(images/overlay.png) repeat-x 0 -110px; line-height: 100%; border-radius: 1em; font: normal 0.5333333333333333em arial, helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); width: auto; } #cssmenu li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } #cssmenu a, #cssmenu a:link { font-weight: bold; font-size: 13px; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } #cssmenu a:hover { background: #000; color: #fff; } #cssmenu .active a, #cssmenu li:hover > { background: #979797 url(images/overlay.png) repeat-x 0 -40px; background: #666666 url(images/overlay.png) repeat-x 0 -40px; color: #444; border-top: solid 1px  #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 0 #ffffff; } #cssmenu ul ul li:hover a, #cssmenu li:hover li {   background: none;   border: none;   color: #666;   -webkit-box-shadow: none;   -moz-box-shadow: none; } #cssmenu ul ul a:hover { background: #7d7d7d url(images/overlay.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } #cssmenu li:hover > ul { display: block; } #cssmenu ul ul { z-index: 1000; display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ffffff url(images/overlay.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } #cssmenu ul ul li { float: none; margin: 0; padding: 3px; } #cssmenu ul ul a, #cssmenu ul ul a:link { font-weight: normal; font-size: 12px; } #cssmenu ul:after { content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } * html #cssmenu ul {   height: 1%; } 

i dont think there problem, normal behavior. there not enough space in container, , last element goes on second line. if dont want happen, put min-width:400px; #cssmenu ul. since have couple of ul's inside #cssmenu, better put separate class on top one.