導航子菜單

第一快速感謝所有誰曾:)導航子菜單

我有問題幫我，現在是我的導航欄，當它進入平板尺寸似乎過渡李的左側，這也發生在我的子菜單上。

我的第二個問題是，我的子菜單不工作，他們是如何在移動大小，移動大小導航菜單不顯示子菜單。

當我點擊子菜單時，li子菜單上的顏色似乎有一個過渡，難以解釋，但是您可以在完整的介質尺寸上看到它。

謝謝您提前。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="robots" content="index,follow" /> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 

</head> 

<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="http://sermon.net/">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"> 
    <!-- SMARTADDON BEGIN --> <script type="text/javascript"> (function() { var s=document.createElement('script');s.type='text/javascript';s.async = true; s.src='http://s1.smartaddon.com/share_addon.js'; var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); })(); </script> <div id="sa_share_bar"> <a id="sa_share_facebook" layout="icon" size="24"></a> <a id="sa_share_twitter" layout="icon" size="24"></a> <a id="sa_share_email" layout="icon" size="24"></a> <a id="sa_share_share" layout="icon" size="24"></a> </div> <!-- SMARTADDON END --> 

    </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> 

<script> 
var slideIndex = 0; 
showSlides(); 

function showSlides() { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex> slides.length) {slideIndex = 1} 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    setTimeout(showSlides, 4000); // Change image every 2 seconds 
} 
</script> 


     </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 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"> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     Footer Footer Footer Footer Footer<br> 
     </div> 

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$('span.nav-btn').click(function(){ 
    $('ul.nav').slideToggle(); 
}) 

$(window).resize(function(){ 
     if($(window).width() > 600){ 
      $('ul.nav').removeAttr('style'); 
    } 

     }) 
</script> 
</body> 
</html> 


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*/ 
    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:red; 
    text-decoration: none; 
    padding:20px; 
    background:navy; 
    transition:all 0.80s; 
} 

/*Navigation li HOVER*/ 
    nav .nav li:hover{ 
    background:black; 
    transition:all 0.80s; 
} 


/*hide submenu*/ 
    nav .nav li ul { 
    width:auto; 
    display: none; 
} 

/*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; 
} 

/*Navigation sub li* xxxxxxxxxxxxxxxxxxxxxxxx yellow to navy*/ 
    nav .nav li ul li:hover{ 
     width:100%; 
    color:red; 
    text-decoration: none; 

    background:yellow; 
} 

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

} 

.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; 
} 


#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-weight:bold; 
    border-top: 2px black solid; 
    text-align:center; 
} 





/* media queries*/ 


@media only screen and (max-width: 660px)){ 

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

    .nav > li{ 
     display:block; 
    } 

    .nav-btn{ 
     display:block; 
     background-color:#333; 
     color:#FFF; 
     font-size:40px; 
     text-align:center; 
     cursor:pointer; 

    } 

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



} 


/*TABLET*/ 
@media (max-width: 780px){ 
/*Navigation a*/ 
    nav .nav li a{ 
    padding:10px; 
} 


} 

/*MOBILE PHONE*/ 
@media (max-width: 660px){ 
    .nav{ 
    text-align:left; 
    display:none; 
    } 

    .nav > li{ 
     display:block; 
    } 

    .nav-btn{ 
     display:block; 
     background-color:#333; 
     color:#FFF; 
     font-size:40px; 
     text-align:center; 
     cursor:pointer; 

    } 

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



} 

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

來源

2016-10-14 user2916941

你能不能讓你的問題得到的jsfiddle？ –

我以前沒有使用JSFiddle，但我會嘗試https://jsfiddle.net/huz3yjrq/ – user2916941

首先如果您將它設置爲「padding：10px;」，則與懸停時的填充有關。那麼它不會將所有東西都推向左邊。

其次，如果添加「z-index：100」放到（nav .nav li ul）中，以便對您的問題進行排序。

z-index基本上是頁面上的圖層，因此通過將其設置爲100，它將會覆蓋懸停上的內容。

不好回覆我知道...我的第一個答案呢！

希望這會有所幫助！

來源

2016-10-14 13:42:33

您的聯繫正在向懸停在離開的原因是因爲你已經設置這個媒體查詢：

/*TABLET*/ 
@media (max-width: 780px){ 
/*Navigation a*/ 
    nav .nav li a{ 
    padding:10px; 
}

但是你有沒有爲padding: 10px;一個:hover所以它是從以前的定式走padding: 20px; ，因此在鏈接中添加一個額外的10px填充並移動它們。

添加到您的媒體查詢：

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

對於你的第二個問題，當你的菜單中的尺寸縮小，你的子菜單鏈接進入主菜單鏈接的下面，而不是你的鼠標懸停在子菜單中，盤旋在下面的主要鏈接盤旋。添加position: relative和z-index來解決這個問題：

/*Make submenu vertical*/ 
    nav .nav li ul li{ 
    width:100%; 
    display: block; 
    float:none; 
    line-height:60px; 
    position: relative; /*add this to make z-index work*/ 
    z-index: 10; /*give z-index so submenu goes above the main menu links*/ 
}

來源

2016-10-14 14:27:36 akcan

回答

相關問題