html - CSS Menu children forcing parents to resize -

i using following code:

html

<div id="wrap">   <ul class="navbar">     <li><a href="#">compare plans</a>     </li>     <li><a href="#">benefits</a>       <ul>         <li><a href="#">large corporates</a>         </li>         <li><a href="#">small & medium<br> businesses</a>         </li>         <li><a href="#">entrepreneurs &<br> start-ups</a>         </li>         <li><a href="#">education &<br> non-profit</a>         </li>         <li><a href="#">web developers &<br> agencies</a>         </li>         <li><a href="#">artists &<br> celebrities</a>         </li>       </ul>     </li>     <li><a href="#">get started</a>       <ul>         <li><a href="#">.net</a>         </li>         <li><a href="#">php</a>         </li>         <li><a href="#">facebook</a>         </li>       </ul>     </li>   </ul> </div> 

and css

#wrap {     width: 100%;     height: 16px;     margin: 0;     z-index: 99;     position: relative;     color:#2c2c2c; } .navbar {     height: 16px;     padding: 0;     margin: 0;     float:right;     margin-top:20px; } .navbar > li {     height: auto;     float: left;     text-align: center;     list-style: none;     font: 12px verdana, arial, helvetica, sans-serif;     padding: 0;     margin-left:17px; } .navbar {     text-decoration: none;     color: black;     display: block; } .navbar > li:hover {     color: #6d4b78; } .navbar > a:hover {     color: #6d4b78; } .navbar li ul {     display: none;     height: auto;     margin: 0;     padding: 0;     background: url("header_bg.jpg") repeat-x scroll 0 0 #ffffff;     border: 1px solid #e0e0e0; } .navbar li:hover ul {     display: block; } .navbar li ul li {     min-height:12px;     padding: 8px 5px; } .navbar > li > ul > li:hover {     background: none repeat scroll 0 0 #664670;     color:#fffff; } 

my problem this:

when hover on benefits, element re-sizing. essentially, growing match width of child elements (the lis in drop-down) larger it.

i want benefits element fixed-width, , haven't allotted sizing ul elements.

to clarify, overflow this:

currently, though, when not hovering, this:

and when hovering, this:

what need fix it?

something this, basic dropdown menu. can set left or right 0 or whatever comfortable with. if menu on right side of screen, setting right 0 better

http://jsfiddle.net/k4jcq/2/

.navbar li {   position: relative;      } .navbar li ul    {   display: none;   height: auto;                                      margin: 0;    padding: 0;   background: url("header_bg.jpg") repeat-x scroll 0 0 #ffffff;   border: 1px solid #e0e0e0;     position: absolute;   left: 0px; }