Question

正在努力解决一些菜单/ z-index问题。我已将z-index设置为最高，并将相对打开和关闭切换。

尝试将其粘贴到CodePen中，但即使相关代码在那里。下拉列表不起作用，但你明白了。

基本上，当您将鼠标悬停在“产品视频”上时，下拉菜单会显示，但会落后于循环显示大图像的jquery横幅。

任何可以让菜单始终位于顶部的想法？

#menu {
        height: 80px;
        position: relative;
    }
    #menu {
        background: #515151;
        height: 40px;
        border: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -khtml-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    #menu {
        background: #585858;
        border-bottom: 1px solid #000000;
        height: 37px;
        margin-bottom: 15px;
        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        -khtml-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        -webkit-box-shadow: 0px 2px 2px #DDDDDD;
        -moz-box-shadow: 0px 2px 2px #DDDDDD;
        box-shadow: 0px 2px 2px #DDDDDD;
        padding: 0px 5px;
    }

    @media (min-width: 1001px)
    #menu ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: center;
        -ms-flex-pack: distribute;
        justify-content: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: table;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: static;
    }

    #menu > ul > li {
        position: relative;
        z-index: 0;
    }

    #menu > ul > li {
        position: static;
        z-index: 0;
    }
    #menu > ul > li {
        padding: 0 5px 0 0;
    }
    #menu > ul > li {
        position: relative;
        float: left;
        z-index: 20;
        padding: 6px 5px 5px 0px;
    }

    a, a:visited, a b, #menu > ul > li > a, #menu > ul > li ul > li > a, ul.box-category > li > a, #footer .column ul li, .category-list ul li, .category-list ul li a.cat-list-name, .product-grid > div, .box-product > div, input, textarea, select, input[type="text"], input[type="password"] {
        -webkit-transition: all 0.5s ease 0s;
        -moz-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    #menu > ul > li > a {
        color: #FFFFFF;
        font-weight: bold;
        line-height: 28px;
        margin-bottom: 0px;
    }
    #menu > ul > li > a {
        font-size: 13px;
        color: #FFF;
        line-height: 14px;
        text-decoration: none;
        display: block;
        padding: 6px 10px 6px 10px;
        margin-bottom: 5px;
        z-index: 6;
        position: relative;
    }

    #menu > ul > li > div {
        z-index: 10;
    }
    #menu > ul > li > div {
        z-index: 10;
    }

    #menu > ul > li > div {
        border: 1px solid #000000;
        background: #E3E3E5;
    }
    #menu > ul > li > div {
        display: none;
        background: #FFFFFF;
        position: absolute;
        z-index: 5;
        padding: 5px;
        border: 1px solid #000000;
        -webkit-border-radius: 0px 0px 5px 5px;
        -moz-border-radius: 0px 0px 5px 5px;
        -khtml-border-radius: 0px 0px 5px 5px;
        border-radius: 0px 0px 5px 5px;
        background: url(../image/menu.png);
    }

    #menu > ul > li > div > ul {
        vertical-align: top;
        z-index: 9999;
    }
    #menu > ul > li > div > ul {
        display: table-cell;
    }
    @media (min-width: 1001px)
    #menu ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: center;
        -ms-flex-pack: distribute;
        justify-content: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: table;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: static;
    }

    #menu > ul > li > div > ul > li {
        position: static;
        z-index: 9999;
    }

    #menu > ul > li > div > ul > li a {
        padding-right: 14px;
        z-index: 9999;
    }
    #menu > ul > li > div > ul > li > a {
        color: #000000;
    }
    #menu > ul > li > div > ul > li > a {
        color: #FFFFFF;
    }
    a, a:visited, a b, #menu > ul > li > a, #menu > ul > li ul > li > a, ul.box-category > li > a, #footer .column ul li, .category-list ul li, .category-list ul li a.cat-list-name, .product-grid > div, .box-product > div, input, textarea, select, input[type="text"], input[type="password"] {
        -webkit-transition: all 0.5s ease 0s;
        -moz-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }

    #menu > ul > li ul > li > a {
        -webkit-border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        -khtml-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        padding: 4px 4px 4px 6px;
    }
    #menu > ul > li ul > li > a {
        text-decoration: none;
        padding: 4px;
        color: #FFFFFF;
        display: block;
        white-space: nowrap;
        min-width: 120px;
    }

确保下拉菜单使用Z-Index覆盖下面的所有内容

0 个答案: