幻灯片放映下的下拉菜单

时间：2016-12-11 11:29:38

标签： html css web

我有下拉菜单，使用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>

但是当我将鼠标移到类别菜单上时，打击列表会显示幻灯片菜单的图像，如下图所示： -

enter image description here

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

1 个答案:

答案 0 :(得分：1)

z-index会解决您的问题，

  • z-index属性指定元素的堆栈顺序。
  • 具有更多堆栈顺序的元素始终位于元素的前面 堆叠顺序较低。
  • 注意： z-index ONLY 适用于定位元素（位置：绝对， position：relative，或position：fixed）。

语法： z-index：auto | number | initial | inherit;

初始值：自动

适用于定位元素

继承否

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>

相关问题
最新问题