CSS overflow is hidden and absolute position

Question

Consider the following simple menu markup (automatically generated, and I don't have much control over 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 the above code, the menu has a fixed width, but it has more elements than can be in this width, so the rest of the elements will be displayed in the second line. I want to display only elements that can fit on the first line, and want to hide the rest.

For this purpose, I want to specify a height for the menu. I use this CSS for the menu:

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

The problem is that the above css also hides .submenu elements. Please check out the demo to understand the problem.

Demo: http://jsfiddle.net/Lgyg2a4r/

Answer 1

In the first part of your problem, you can use white-space: nowrap on the menu and display: inline-block for your immediate children. This forces all menu items to one line and they pass by the right edge of the window.

However, this will force a horizontal scrollbar. Depending on your situation, you can add overflow-x: hidden to the element containing the menu. This item must have different content so that it is above the highest 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> 

Answer 2

The following way you can do this without the need for jQuery. Remove position:relative with li . And remove left , top from submenu and use negative margin to do the trick.

 .menu { width: 500px; height: 20px; list-style: none; padding: 0; margin: 0; overflow: hidden /* problem */ } li { float: left; margin-right: 30px; } ul li .submenu { position: absolute; display: none; list-style: none; width: 100px; margin-left: -40px; } 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> 

Check the Fiddle Here.

Note: It is not reliable, but useful to solve the problem.

Answer 3

you can achieve this with jQuery $(this).position();

 $('li').hover(function(){ var li = $(this).position(); $(this).children('ul').css({ left: li.left, top : li.top+20 }).fadeToggle(); }); 

and remove position relative from li

Work file

Answer 4

If you can add a class to the elements you want to hide on hover (second line), try something like this:

 ...... <li class="sec">Aliquam elit nisi</li> <li class="sec">pharetra quis</li> <li class="sec">nulla eget</li> ...... 

CSS

 ul li:hover ~ li.sc { display: none; }