移动下拉菜单

时间：2016-10-17 21:44:53

标签： html css

我遇到了这个问题，我的下拉菜单在其中一个菜单列表上显示黑色块，我添加了一张图片来解释比文字更好。

我确信这是一个简单的问题，任何帮助都会很棒。

这是JSfiddle链接 https://jsfiddle.net/8pgn79cp/1/ enter image description here 

<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 个答案:

答案 0 :(得分：0)

在CSS中，您有以下代码：

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

这会导致{h}中的任何li更改为黑色背景。

答案 1 :(得分：0)

这是因为你的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;
}
如果您需要更多帮助，请在下方发表评论。 这是你的小提琴：https://jsfiddle.net/8pgn79cp/3/ 我添加了一些脚本。

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

只需在nav-btn点击即可显示菜单。

注意：不要给li's宽度，所以在悬停时你不需要处理它。将a标记设置为display inline-block的填充或宽度，父li将包含a标记宽度，并将鼠标悬停在a上。< / p>

相关问题
最新问题