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

Question

我一直在关注有关创建侧边栏的在线教程，但遇到了问题。当我将鼠标悬停在其中一个菜单上时，会出现一个子菜单。但是，如果我将任何内容放在菜单的右侧，则只有当您将鼠标放在它上面时，子菜单才会出现。我希望菜单出现在侧边栏右侧的文本上方

当左边没有任何东西时，菜单可以完美运行（例如溢出：自动；）

Here 是该问题的一个 jfiddle 示例

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;

            }

有谁知道如何解决这个问题？

Answer 1

您的子菜单实际上正在显示；它只是没有显示的背景颜色。现在，您已将背景颜色应用于子菜单的 UL。如果您改为将背景颜色应用于该 UL 中的 LI，它可以解决问题（我认为这可能是因为 UL 的 z-index 非常低？）。

无论如何，这是要添加的 CSS 规则：

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

然后您可以从 #sidebar-menu ul li > ul 中删除背景颜色，因为它没有任何作用。

Answer 2

问题是您在 CSS 上的 z-index 为 -1（因此在所有内容之后）用于翻转。 将#sidebar-menu ul li > ul 的 Z-index 更改为 100，将 #sidebar-menu 的 z-index 更改为 200 即可解决此问题。 这应该是你的 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;

        }