Question

请检查以下代码..

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>hover-navigation</title>

        <meta name="description" content="">
        <meta name="author" content="yesvin">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .menuContainer{
                width:100px;
                height:100vh;
                background:#ccc;
                z-index:1;                  
            }
            .menuContainer ul {
                padding:20px 0 0 0;
                margin:0;   
            }
            .menuContainer ul li {
                padding:10px;
                margin:0;
                list-style: none;               
                border-bottom:solid 1px #000;
                font-family:'Arial';
                font-size:16px;
                background:#00ACD6;
                position: relative;
            }
            .menuContainer ul li:hover{             
                background:#00A65A;
                cursor:pointer;
            }
            .menuContainer ul li a{
                text-decoration:none;               
                color:#000;             
            }
            .menuContainer ul li:hover a{
                text-decoration:none;               
                color:#fff;
            }
            .menuContainer ul li a:after{
                content:' •'    
            }

            .menuContainer ul li ul {               
                position: absolute;             
                top:-20px;
                left:-100px;
                height:100vh;
                width:0px;
                z-index:-1;

                -webkit-transition: width 0.4s, left 0.4s;
                -o-transition: width 0.4s, left 0.4s;
                transition: width 0.4s, left 0.4s;
            }
            .menuContainer ul li:hover ul {             
                left:100px;
                width:100px;    
            }
        </style>

    </head>

    <body>
        <div class="menuContainer">
            <ul>
                <li><a href="#">Frontend</a>
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>Javascript</li>
                    </ul>                   
                </li>                                   
                <li><a href="#">Backend</a>
                    <ul>
                        <li>PHP</li>
                        <li>MYSQL</li>
                        <li>ASP</li>
                        <li>JSP</li>                        
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

问题在于'z-index'。因为当我悬停'li'时，子菜单打开，但它隐藏了，当我将鼠标移到下一个'li'上时

但删除'z-index'或为'container'和'ul li ul'保持相同的'z-index'工作正常。但子菜单会在主菜单上显示动画。

我需要子菜单应该在容器后面。这将是什么解决方法......

查看演示文稿的小提琴http://jsfiddle.net/a92c03zj/1/

提前致谢...

Answer 1

检查一下：

.menuContainer ul li ul {
    position: absolute;
    overflow: hidden;
    top:-20px;
    left:100px;
    height:100vh;
    width:0px;
    z-index:0;
    -webkit-transition: width 0.4s;
    -o-transition: width 0.4s;
    transition: width 0.4s;
}
.menuContainer ul li:hover ul {
    width:100px;
    z-index:1;
}

只需更改这些代码行，就可以按照自己的意愿使用。为了您的解释：我们只是动画宽度，而不是动画左侧位置（我们无法真正看到）。为了使文本在整个时间内都能很好地显示，我们使用“overflow:hidden”以便文本不会被修复。此外，由于我们现在只是为宽度设置动画，因此左侧位置最初设置为100px。我做的最后一个更改是在悬停时更改z-index，以便“旧”下拉列表不会在“新”下拉列表上进行动画处理。

带有纯CSS的垂直弹出菜单

1 个答案: