Question

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

当左边没有任何内容时（例如，溢出：自动;）

，菜单可以正常工作

Here是问题的一个例子

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索引为-1（所以在所有内容之后）。更改＃sidebar-menu ul li的Z-index＆gt; ul到100，＃sidebar-menu的z-index修复它。这应该是你的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;

        }

Html，CSS：边栏子菜单没有出现

2 个答案: