Position fixed and overflow-y:scroll issue

I have read this question & answer: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue as well as a bunch of other conflicting use cases. I’ve tried applying different overflow types to different parents also. Nothing seems to get my use case working.

My Case

I have a full height fixed menu that will contain lots of links so if a browser isn’t high enough to show them all I’d like to allow the user to scroll within the fixed div. Not a bold request.

How do I work around this issue, here’s an example of the setup i’m using: http://jsfiddle.net/mz9abf43/9/

Expected Output

The lines between each link should overflow to the right of the blue menu (like the image below) AND also allow the user to scroll within the blue menu. Currently I can only do one or the other.

enter image description here

My structure is:

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

My CSS is

#fixed {
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;
}

.menu   {
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: 280px;

        /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
        overflow-y: scroll;
        overflow-x: visible;

}

.menu .drop {
            background: #fff;
            height: 100%;
            z-index: 0;
}


Source: css3

Leave a Reply