HTML，CSS：未出现侧边栏子菜单

Question

I have been following a tutorial online about creating a sidebar and i have run into an issue. When i hover over one of the menus a sub menu appears. But if i put anything to the right of the menu the sub menu does not appear only when you put the mouse over it. I want the menu to appear over the text to the right of the sidebar

The menu works perfectly when nothing is to the left (eg overflow:auto;)

Here is a jfiddle example of the issue

HTML

    <nav id="sidebar-menu">

        <ul class="parent-sidebar-menu">

            <li><a href="#">Home & Kitchen</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Electronics</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Clothing</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Cars & Motorbikes</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Books</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Support</a>

                <ul>

                    <li><a href="#">Contact Us</a></li>

                    <li><a href="#">Forum</a></li>

                    <li><a href="#">Deliveries</a></li>

                    <li><a href="#">T&C</a></li>

                </ul>

            </li>

        </ul>

    </nav>

</div>

<div align="top">

    <p>this is just a test</p>

</div>

CSS

p, ul, li, div, nav
        {
            padding:0;
            margin:0;
        }


        body
        {
            font-family:Calibri;
        }


        #sidebar-menu {
            overflow: visible;
            position:relative;
            z-index:2;
        }


        .parent-sidebar-menu {
            background-color: #0c8fff;
            min-width:200px;
            float:left;
        }


        #sidebar-menu ul
        {
            list-style-type:none;
        }


        #sidebar-menu ul li a
        {

            padding:10px 15px;
            display:block;
            color:#fff;
            text-decoration:none;
        }


            #sidebar-menu ul li a:hover
            {
                background-color:#007ee9;
            }





#sidebar-menu ul li:hover > ul {

                left: 200px;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #sidebar-menu ul li > ul {

                position: absolute;

                background-color: #333;

                top: 0;

                left: -200px;

                min-width: 200px;

                z-index: -1;

                height: 100%;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #sidebar-menu ul li > ul li a:hover

            {

                background-color:#2e2e2e;

            }

Does anyone know how to fix this?

Answer 1

Your sub-menu actually is showing up; it's just the background color that doesn't show up. Right now, you have the background color applied the sub-menu's UL. If you instead apply the background-color to the LIs within that UL, it fixes the issue (I think this might be because of the UL's very low z-index?).

Anyway, here's the CSS rule to add:

#sidebar-menu ul li > ul li {
    background-color: #333;
}

You can then remove the background-color from #sidebar-menu ul li > ul since it doesn't do anything.

Answer 2

The issue is that you have a z-index of -1 (so behind everything) on the CSS for your rollover. Changing the Z-index of the #sidebar-menu ul li > ul to 100 and the z-index of the #sidebar-menu to 200 fixes it. This should be your CSS:

p, ul, li, div, nav
    {
        padding:0;
        margin:0;
    }


    body
    {
        font-family:Calibri;
    }


    #sidebar-menu {
        overflow: visible;
        position:relative;
        z-index:200;
    }


    .parent-sidebar-menu {
        background-color: #0c8fff;
        min-width:200px;
        float:left;
    }


    #sidebar-menu ul
    {
        list-style-type:none;
    }


    #sidebar-menu ul li a
    {

        padding:10px 15px;
        display:block;
        color:#fff;
        text-decoration:none;
        z-index:100;
    }


        #sidebar-menu ul li a:hover
        {
            background-color:#007ee9;
        }





#sidebar-menu ul li:hover > ul {

            left: 200px;

            -webkit-transition: left 200ms ease-in;

            -moz-transition: left 200ms ease-in;

            -ms-transition: left 200ms ease-in;

            transition: left 200ms ease-in;

        }


        #sidebar-menu ul li > ul {

            position: absolute;

            background-color: #333;

            top: 0;

            left: -200px;

            min-width: 200px;

            z-index: 1;

            height: 100%;

            -webkit-transition: left 200ms ease-in;

            -moz-transition: left 200ms ease-in;

            -ms-transition: left 200ms ease-in;

            transition: left 200ms ease-in;

        }


        #sidebar-menu ul li > ul li a:hover

        {

            background-color:#2e2e2e;

        }