html - CSS DropDown Menu Bug Fix -

i have created dropdown menu css, can't solve 1 problem: last menu element's width smaller dropdown's width. here code: http://jsfiddle.net/eefdp/

i maybe use width solve problem temporarily, not logical , permanent solution, considering menu extend new elements. please help?

html code:

<ul>     <li><a href="#">home</a></li>     <li>     <a href="#">tutorials</a>         <ul>             <li><a href="#">php</a></li>             <li><a href="#">css</a></li>             <li><a href="#">javascript</a></li>         </ul>     </li>     <li>     <a href="#">contact</a>         <ul>             <li><a href="#">by contact</a></li>             <li><a href="#">by email</a></li>         </ul>     </li> </ul>  <div class="clear"></div>  <p>i paragraph.</p> 

css code:

.clear {         clear:both;     }      ul {         list-style-type:none;         padding:0;         margin:0;     }     ul>li {         float:left;     }      ul>li>a {         display:block;         padding:5px 10px;         color:#000;         text-decoration:none;         background:#fff;         border-bottom:1px solid #ccc;     }     ul>li>a:hover {         background-color:#bbb;         color:white;     }      ul>li>ul {         position:absolute;         display:none;     }     ul>li>ul>li {         float:none;     }     ul>li:hover>ul {         display:block;     } 

instead of using absolute positioning on dropdowns, can use relative position 0 height , overflow: visible. also, instead of display: none/block can use visibility: hidden/visible. make parent elements know of children.

http://jsfiddle.net/eefdp/4/

ul > li > ul {     position: relative;     visibility: hidden;     height: 0; }  ul > li:hover > ul {     visibility: visible; }