我有一个下拉菜单,它使用css来充当菜单:-



 #primary_nav_wrap
{
    background:url("../img/footer_lodyas.png")no-repeat center center fixed;
    display:inline-block;
    width:800px;
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:black;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    line-height:50px;
    padding:0 15px;
    font-family:yekan,montserratAltenates;
}

#primary_nav_wrap ul li
{
    position:relative;
    display:inline-block;
    float:right;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:rgba(255, 153, 0, 0.7);
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

    .slidshow_container{
    max-width:800px;
    position:relative;
    margin:0;
    padding:0;
}

.mySlides{
    position:relative;
    margin:0;
    padding:0;
}

.numbertext{
    font-family:yekan,montserratAltenates;
    font-size:15px;
    position:absolute;
    padding:10px;
    color:white;
}

.prev,.next{
    cursor:pointer;
    position:absolute;
    padding:10px;
    color:white;
    margin:auto;
    top:150px;
    font-size:30px;
    border-radius:0px 3px 3px 0px;

}

.next:hover{
    background:rgba(40,40,40,0.8);
    border-radius:3px 0px 0px 3px;

}

.prev:hover{
    background:rgba(40,40,40,0.8);
}

.next{
    right:0;
}

.mySlides .text{
    font-family:yekan,montserratAltenates;
    font-size:15px;
    position:absolute;
    bottom:0px;
    padding:20px;
    margin-bottom:5px;
    width:800px;
    text-align:center;
    color:white;
    background:rgba(35, 35, 35, 0.60);
    overflow:hidden;
}

<nav id="primary_nav_wrap">
            <ul>
                <li class="current-menu-item"><a href="#">Home</a></li>
                <li>
                    <a href="#">Category</a>
                    <ul>
                        <li><a href="#">Sub Menu 1</a></li>
                        <li><a href="#">Sub Menu 2</a></li>
                        <li><a href="#">Sub Menu 3</a></li>
                        <li><a href="#">Sub Menu 5</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Contact us</a>

                </li>
                <li>
                    <a href="#">About us</a>
                </li>
            </ul>
        </nav>
    <br style="clear:both;" />
        <div class="slidshow_container">
            <div class="mySlides fade">
                <div class="numbertext">1 / 4</div>
                <img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" />
                <div class="text">image 1</div>
            </div>

            <div class="mySlides fade">
                <div class="numbertext">2 / 4</div>
                <img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" />
                <div class="text">image 2</div>
            </div>

            <div class="mySlides fade">
                <div class="numbertext">3 / 4</div>
                <img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" />
                <div class="text">image 3</div>
            </div>

            <div class="mySlides fade">
                <div class="numbertext">4/ 4</div>
                <img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" />
                <div class="text">image 4</div>
            </div>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>





但是,当我将鼠标移到类别菜单上时,打击列表会出现在幻灯片菜单的图像下方,如下图所示:-

html - 幻灯片放映下的下拉菜单-LMLPHP

那么我该如何解决这个问题呢?

最佳答案

z-index将解决您的问题,


z-index属性指定元素的堆栈顺序。
具有较高堆叠顺序的元素始终位于元素前面
具有较低的堆叠顺序。
注意:z-index仅适用于定位的元素(position:absolute,
位置:相对,或位置:固定)。


句法 :
z-index:自动|编号|初始|继承;

初始值:自动

适用于定位的元素

继承无

https://developer.mozilla.org/en/docs/Web/CSS/z-index



#primary_nav_wrap
{
    background:url("../img/footer_lodyas.png")no-repeat center center fixed;
    display:inline-block;
    width:800px;
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:black;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    line-height:50px;
    padding:0 15px;
    font-family:yekan,montserratAltenates;
}

#primary_nav_wrap ul li
{
    position:relative;
    display:inline-block;
    float:right;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:rgba(255, 153, 0, 0.7);
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
      /* Here Put z-index*/
     z-index:9999;
}

#primary_nav_wrap ul ul li
{
    width:200px
}

#primary_nav_wrap ul ul a
{

    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

    .slidshow_container{
    max-width:800px;
    position:relative;
    margin:0;
    padding:0;
}

.mySlides{
    position:relative;
    margin:0;
    padding:0;
}

.numbertext{
    font-family:yekan,montserratAltenates;
    font-size:15px;
    position:absolute;
    padding:10px;
    color:white;
}

.prev,.next{
    cursor:pointer;
    position:absolute;
    padding:10px;
    color:white;
    margin:auto;
    top:150px;
    font-size:30px;
    border-radius:0px 3px 3px 0px;

}

.next:hover{
    background:rgba(40,40,40,0.8);
    border-radius:3px 0px 0px 3px;

}

.prev:hover{
    background:rgba(40,40,40,0.8);
}

.next{
    right:0;
}

.mySlides .text{
    font-family:yekan,montserratAltenates;
    font-size:15px;
    position:absolute;
    bottom:0px;
    padding:20px;
    margin-bottom:5px;
    width:800px;
    text-align:center;
    color:white;
    background:rgba(35, 35, 35, 0.60);
    overflow:hidden;
}

<nav id="primary_nav_wrap">
        <ul>
            <li class="current-menu-item"><a href="#">Home</a></li>
            <li>
                <a href="#">Category</a>
                <ul>
                    <li><a href="#">Sub Menu 1</a></li>
                    <li><a href="#">Sub Menu 2</a></li>
                    <li><a href="#">Sub Menu 3</a></li>
                    <li><a href="#">Sub Menu 5</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Contact us</a>

            </li>
            <li>
                <a href="#">About us</a>
            </li>
        </ul>
    </nav>
<br style="clear:both;" />
    <div class="slidshow_container">
        <div class="mySlides fade">
            <div class="numbertext">1 / 4</div>
            <img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" />
            <div class="text">image 1</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 4</div>
            <img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" />
            <div class="text">image 2</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 4</div>
            <img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" />
            <div class="text">image 3</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">4/ 4</div>
            <img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" />
            <div class="text">image 4</div>
        </div>

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>

关于html - 幻灯片放映下的下拉菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41085650/

10-09 06:18
查看更多