html - CSS overflow hidden and absolute position -

consider following simple menu markup (automatically generated, , not have control on it):

.menu {    width: 500px;    height: 20px;    list-style: none;    padding: 0;    margin: 0;    /* overflow: hidden ... problem */  }  li {    float: left;    position: relative;    margin-right: 30px;  }  ul li .submenu {    position: absolute;    left: 0;    display: none;    padding: 0;    margin: 0;    list-style: none;    width: 100px;  }  ul li:hover .submenu {    display: block;  }

<ul class="menu">    <li>lorem ipsum</li>    <li>submenu      <ul class="submenu">        <li>sub item 1</li>        <li>sub item 2</li>      </ul>    </li>    <li>consectetur</li>    <li>adipiscing elit</li>    <li>aliquam elit nisi</li>    <li>pharetra quis</li>    <li>nulla eget</li>  </ul>

in above code, menu has fixed width, has more items can fit in width, rest of items go on second line. want display items can fit in first line, , want hide rest of them.

for purpose want specify height menu. using css menu:

.menu {   width: 500px;   height: 20px;   overflow: hidden; /* problem */ } 

problem above css hides .submenu items too. please see demo understand problem.

demo: http://jsfiddle.net/lgyg2a4r/

for first part of problem, use white-space: nowrap on menu , display: inline-block on immediate children. forces menu items on 1 line , extend past right edge of window.

however, force horizontal scrollbar. depending on situation, can add overflow-x: hidden on element contains menu. element must have other content taller tallest submenu.

#wrapper {    overflow-x: hidden;    min-height: 400px;  }  .menu {    margin: 0;    padding: 0;    list-style: none;    white-space: nowrap;    background-color: palevioletred;  }  .menu > li {    display: inline-block;    margin-right: 30px;    position: relative;  }  .submenu {    position: absolute;    left: 0;    top: 100%;    margin: 0;    padding: 0;    list-style: none;    display: none;    background-color: paleturquoise;  }  .menu li:hover .submenu {    display: block;  }

<div id="wrapper">    <ul class="menu">      <li>lorem ipsum</li>      <li>submenu        <ul class="submenu">          <li>sub item 1</li>          <li>sub item 2</li>        </ul>      </li>      <li>consectetur</li>      <li>adipiscing elit</li>      <li>aliquam elit nisi</li>      <li>pharetra quis</li>      <li>nulla eget</li>    </ul>  </div>