堆栈内存溢出
  简体   繁体   English

移动下拉菜单

[英]Mobile drop down menu

 原文  2016-10-17 21:44:53  7   2    html/ css

问题描述

I'm stuck with this issue, my drop down menu is showing a black block over one of the menu lists, i have added a picture to explain better than words. 我一直困扰这个问题，我的下拉菜单在一个菜单列表上显示了一个黑色块，我添加了一张图片来解释比文字更好。

I'm sure it's a simply problem, any help would be great. 我敢肯定，这只是一个简单的问题，任何帮助都会很棒。

this is the JSfiddle link https://jsfiddle.net/8pgn79cp/1/ 这是JSfiddle链接https://jsfiddle.net/8pgn79cp/1/ 在此处输入图片说明 

<body>
<div id="MainContainer"><!--Start of MainContainer-->

    <div id="Header"><!--Start of Header-->

        <div><img id="Logo"src="images/logo.png"></div>


        <nav><!--start of nav tag-->
            <span class="nav-btn"></span>
                <ul class="nav">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Media</a>
                        <ul>
                            <li><a href="#">Sermons</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Blah</a></li>
                        </ul>

                    </li>

                    <li><a href="#">Ministries</a>
                        <ul>
                            <li><a href="#">Evangelism</a></li>
                            <li><a href="#">Youth</a></li>
                            <li><a href="#">Newsletter</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Home</a></li>
                </ul><!--End of nav class ul tag-->
        </nav><!--End of nav tag-->

    </div><!--End of Header-->
    <div id="share">


    </div>

        <div class="firstsection">




<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext"></div>
  <img src="images/verse.jpg" style="width:100%">
  <div class="text"></div>
</div>

<div class="mySlides fade">
  <div class="numbertext"></div>
  <img src="images/run.png" style="width:100%">
  <div class="text"></div>
</div>

<div class="mySlides fade">
  <div class="numbertext"></div>
  <img src="images/gill.jpg" style="width:100%">
  <div class="text"></div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>




        </div>

            <div id="WelcomeBox">
                <img id="WelcomeImage" src="images/welcome logo.png"/>
            </div>



        <div class="secondsection">

            <p>

                First Words<br><br>
                *secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                secondsection secondsection secondsection 
                <img id="ChurchPic" src="images/churchpic.png">secondsection secondsection secondsection secondsection 
                secondsection secondsection secondsection secondsection secondsection secondsection secondsection 

                secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
                secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
            </p>
            </div>




        <div id="Footer">
        <p>New Mercy International Church 2016</p><br>

        </div>

    </div><!--End of MainContainer-->



</body>





 body{
            width:100%;
            height:100%;
            background:url(images/glasgow.jpg);
            background-position: center center;
            background-repeat:  no-repeat;
            background-attachment: fixed;
            background-size:  cover;
            background-color: #999;

 }

 *{
     padding:0px;
     margin:0px;
 }

 #MainContainer{
width:100%;
height:auto;     
 }

 #Header{
     width:100%;
     height:auto;
     position:fixed;
    right: 0;
    top: 0;
    left:0;
    z-index:2;
}

 #share{
     top:102px;
     position:fixed;
     z-index:5;
 }

 /*Top Logo*/
 #Logo
 {
    width:115px;
    height:auto;
    float:left;
    margin:15px;
    cursor:pointer;
    position: fixed;
    z-index:1;
 }


 /*Navigation ul*/
     .nav {
     width:100%;
     background:black;
     line-height:100px;
     position:fixed;
     border-bottom: 2px red solid;
}

 /*Navigation li                     when added, li transition from small to big*/
    nav .nav li{
    list-style-type: none;
    float: right;
    position:relative;  
}

#NavBar ul:after{content:"";display:block;clear:both}


 /*Navigation a*/
    nav .nav li a{
    color:white;
    text-decoration: none;
    padding:20px;
}

 /*Navigation a*/
    nav .nav li a:hover{
    color:yellow;
    text-decoration: none;
    padding:px;
    background:blue;
    transition:all 0.8s;
}

/*Navigation li HOVER                  not sub side border line*/
    nav .nav li:hover{
        width:auto;
     background:black;
     transition:all 0s;
}


/*hide submenu                                                          BLACK PATCH*/
    nav .nav li ul {
    width:auto;
    display: none;
    border-right:2px red solid;
    border-left:2px red solid;


}

/*Show submenu at hover*/
    nav .nav li:hover ul {
    width:auto;
    display:block;
    position:absolute;
    top:100px;
    background-color:black;
    border-bottom:2px red solid;
}

/*Make submenu vertical*/
  nav .nav li ul li{
  width:100%;
  display: block;
  float:none;
  line-height:60px;
  position: relative; 
  z-index: 10; 
}

 /*Navigation sub li*/
    nav .nav li ul li:hover{
    width:auto;
    color:red;
    text-decoration: none;
    background:blue;
}

 /*Navigation a*/
    nav .nav li ul li a:hover{
    width:auto;
    color:yellow;
    text-decoration: none;
    background-color:blue;

}

.nav-btn{display:none;}

.firstsection{
    width:100%;
    min-height:600px;
    margin-top:100px;
    padding-top:50px;
    background:url(images/1.jpg);
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    color: Black;
}

.secondsection{
        width:100%;
    min-height:500px;
    margin-top:0px;
    padding-top:50px;
    background:url(images/bk2.jpg);
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    color: Black;
}

.firstsection p {
    width:80%;
    margin: auto;
    display:block;
}

.secondsection p 
{
    width:80%;
    margin: auto;
    display:block;
}

/*Church Family Picture*/
#ChurchPic{
    width:auto;
    height:auto;
}

#WelcomeBox {
  width: 100%;
  height: 300px;
  position: relative;
}

#WelcomeImage {
  max-width: 100%;
  max-height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


* {box-sizing:border-box}

body {font-family: Verdana,sans-serif;}
    .mySlides {display:none}

/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    margin-top:50px;
    border-top:2px black solid;
    border-bottom:2px black solid;
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color:aqua;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

#Footer{
    width:100%;
    background: rgba(255, 255, 255, 0.6);
    color:black;
    font-size:12px;
    font-weight:bold;
    border-top: 2px black solid;
    text-align:center;
}





/*MEDIA QUERIES*/

/*TABLET*/
@media (max-width: 780px){

/*Navigation a*/
    nav .nav li a{
    padding:10px;
}

nav .nav li a:hover {
padding:10px;
}
}

/*                                                                    MOBILE PHONE*/
@media (max-width: 660px){


    #Logo{
        width:70px;
        right:10px;
            }

     #share{
            top:81px;
     right:5px;
    }

     /*Navigation a*/
    nav .nav li a:hover{
    color:yellow;
    background:black;
    transition:all 0.0s;
}

/*Show submenu at hover                                      maybe black patch*/
    nav .nav li:hover ul {


}

     /*Navigation ul size of ul main menu on mobile*/
     .nav {
     width:60%;
     height:auto;
     background:black;
     line-height:50px;
     position:fixed;
     border-radius:0 0 20px 0;
}

 /*Navigation li size of li in mobile mode*/
    nav .nav li{
    width:100%;
    display:block;
    float: none;
    background-color:gray;
    border-bottom:1px red solid;
}



 /*Navigation li size of li in mobile mode*/
    nav .nav li:last-child{
    border-radius:0 0 20px 0;
}

/*                                                                       sub menu background color*/
nav .nav li ul li{
    width:auto;
    left:30px;
    line-height:30px;
    background-color:orange;
}

/*                                                                       BLACK PATCH MOBILE SIZE*/
nav .nav li ul{

     border-right:0px red solid;
      border-left:0px red solid;
}

/*Show submenu at hover                                                           sub test*/
    nav .nav li:hover ul {
    width:50%;
    padding:0px;
    margin:0px;
    left:75px;
    top:10px;
    background-color:black;
}


    .nav{
    text-align:left;
    display:none;   
    }

    .nav > li{
        display:block;
    }

    .nav-btn{
        width:100%;
        height:80px;
        display:block;
        background-color:#333;
        color:#FFF;
        font-size:30px;
        padding-left:10px;
        padding-top:10px;
        text-align:left;
        cursor:pointer; 
    }

    .nav-btn:before{
        content: "Menu";
            }



}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

2 个解决方案

解决方案1
 0  2016-10-17 21:51:20

In your CSS you have the following code: 在CSS中，您具有以下代码： 

nav .nav li:hover {
    width: auto;
    background: black;
    transition: all 0s;
}

This causes whichever li is being hovered to change to a black background. 这将导致任何悬停的li变为黑色背景。

解决方案2
 0  2016-10-18 01:25:20

this is because you have this on your css: 这是因为您的CSS上有这个： 

/*Show submenu at hover                                                           sub test*/
    nav .nav li:hover ul {
    width:50%;
    padding:0px;
    margin:0px;
    left:75px;
    top:10px;
    background-color:black;
}

comment below if you need more help. 如果您需要更多帮助，请在下面评论。 this is your fiddle: https://jsfiddle.net/8pgn79cp/3/ i addded some script. 这是您的小提琴： https ://jsfiddle.net/8pgn79cp/3/我添加了一些脚本。 

$('.nav-btn').click(function(){
    $('.nav').slideToggle(300);
});

just to show your menus on nav-btn click. 只是为了在nav-btn单击上显示菜单。

notes: dont give li's a width, so you dont need to work on it when hover. 注意：不要给li's设置宽度，所以悬停时不需要处理它。 Set your a tag a padding or width just display it inline-block and the parent li will contain your a tag width and do the hover on a . 设置你的a标签的填充或宽度只是display它inline-block和父里将包含a标签宽度和做悬停上a 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 兼容移动设备的下拉菜单 - Mobile compatible drop down menu jQuery下拉移动菜单链接不起作用 - jquery drop down mobile menu link not working 下拉移动菜单未推送内容 - Drop down mobile menu is not pushing the content 在手机上启动时隐藏下拉菜单 - Hide drop down menu on start on a mobile 下拉菜单在移动设备上不起作用 - Drop down menu not working on mobile devices 如何在移动视图中切换菜单的下拉部分？ - How to make the drop down portion of my menu toggle in mobile view? 在下拉菜单上更改背景颜色-移动 - Changing background color on drop-down menu - mobile 移动下拉菜单切换为“有效”，但始终不可见 - Mobile drop-down menu toggle “working” but never visible 在手机中选择＃后，我需要下拉菜单关闭 - I need drop down menu to close after # selection in mobile 移动设备上的CSS下拉菜单。 怎么走：hover - CSS Drop down menu on mobile. how to get around :hover
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM