CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 6541

Overflow issue in a fixed position sidebar

I have a fixed sidebar, with overflow-x:hidden so I get a scrollbar to scroll. But now I want to add a submenu, that when shown will overflow into the main window.

This works fine if I set overflow:visible but then I lose the scrolling ability.

Can I get them both together?

http://codepen.io/anon/pen/OPzvdP

#sidebar-wrapper {
  width: 200px;
  background-color: #396DA5;
  position: fixed;
  height: 100%;
  overflow-x: hidden;
}

#menu ul ul {
  display: none;
  list-style: none;
}

#menu ul ul {
  position: relative;
}

#menu ul li:hover > ul {
  display: block;
}

#menu ul ul {
  padding: 50px;
  position: absolute;
  left: 80%;
  top: 0;
  background: #f00;
}
<div id="sidebar-wrapper">
  <div id=menu>
    <ul>
      <li>Item Hover
        <ul>
          <li>subitem<li>
        </ul>
        </li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
  </div>
</div>

The top li item has a hover, that can be fully see when the overflow-x:hidden is removed from the top css line, but then the side bar cant be scrolled!

EDIT - Answers have said use position:fixed and this works. But can this be applied to any of the list items so the submenu opens beside the parent?

Upvotes: 2

Views: 2953

Answers (2)

U r s u s
U r s u s

Reputation: 6968

No need to add overflow-y.

Your class should be 

#menu ul  li:hover > ul {
  display: block;
  position: fixed;
  top: 8px;
  left: 150px;
}

DEMO

Upvotes: 3

Rence
Rence

Reputation: 2950

Try overflow-y: scroll

and set your hover box to position fixed:

#menu ul ul { padding:50px;     position: fixed; left: 200px; top:0; background:#f00;}

You will need to adjust the position.

Not a very pretty solution though.

Upvotes: 1

Related Questions