CSS overflow hidden and absolute position

Question

Consider following simple menu markup (automatically generated, and I do not 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 items than can fit in that width, so the rest of the items will go on the second line. I want to display only the items which can fit in first line, and want to hide the rest of them.

For that purpose I want to specify the height for the menu. I am using this CSS for the menu:

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

Problem is that The above css hides the .submenu items too. Please see the demo to understand the problem.

enter image description here

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

Why dont you apply styling to your sub menu to make it look more like a drop down. Background, border, drop-shadow — Andrew
– Andrew, Commented May 12, 2015 at 11:05
How will the user ever get to the items that appear on the second line? — Marc Audet
– Marc Audet, Commented May 12, 2015 at 11:08
Do you have the means to add a class to all of the items that are on the second line? — MCMXCII
– MCMXCII, Commented May 12, 2015 at 11:18
@MCMXCII if there's no other way to control the height of the menu, then yes that can be a possibility too. — user1355300
– user1355300, Commented May 12, 2015 at 11:21

Salman Arshad · Accepted Answer · 2015-05-12 11:34:41Z

For the first part of your problem, you could use white-space: nowrap on the menu and display: inline-block on its immediate children. This forces all menu items on one line and they extend past the right edge of the window.

However, this will force a horizontal scrollbar. Depending on your situation, you can add overflow-x: hidden on the element that contains the menu. That element must have other content so that it is taller than the 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>

ketan · Accepted Answer · 2015-05-12 11:31:54Z

1

Following way you can do it without need of JQuery. Remove position:relative from li. And remove left, top from submenu and use negative margin will make 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 Fiddle Here.

Note: not reliable but good to solve problem.

edited May 12, 2015 at 11:31

answered May 12, 2015 at 11:26

ketan

19.4k42 gold badges68 silver badges107 bronze badges

2 Comments

Marc Audet Over a year ago

Note that you removed the left offset from .submenu, which is critical to making this work. A few words of explanation would be in order. Only downside may be cross-browser issues.

Salman Arshad Over a year ago

You have removed relative positioning from the main menu items. Ouch.

Roy Sonasish · Accepted Answer · 2015-05-12 11:33:56Z

1

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

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

and remove the position relative from li

Working File

answered May 12, 2015 at 11:33

Roy Sonasish

4,60923 silver badges31 bronze badges

2 Comments

oshell Over a year ago

if you remove position relative and left: 0 you would achieve the same without jquery

Roy Sonasish Over a year ago

@Escobear yes but it may be cross browser issue

MCMXCII · Accepted Answer · 2015-05-12 11:23:54Z

0

If you are able to add a class to the items you want to hide on hover (the 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;
}

answered May 12, 2015 at 11:23

MCMXCII

1,0264 gold badges14 silver badges27 bronze badges

2 Comments

user1355300 Over a year ago

sorry if I wasn't clear enough, the mark up is automatically generated, and I do not have much control over it

MCMXCII Over a year ago

Ahhh, in which case is the desired solution to remove the elements on the second line or to just make it so they don't cover up the submenu?

Collectives™ on Stack Overflow

CSS overflow hidden and absolute position

4 Answers 4

Comments

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related