Question

首先快速感谢所有曾帮助我的人：）

我现在遇到的问题是我的导航栏，当它转到平板电脑尺寸时，它似乎将li转换到左侧，这也发生在我的子菜单中。

我的第二个问题是，我的子菜单不适用于移动尺寸，移动尺寸导航菜单不显示子菜单。

当我点击子菜单时，似乎很难解释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}
}

Answer 1

首先，如果要将其设置为“padding：10px;”，则可以使用悬停上的填充。然后它不会把所有东西推到左边。

其次，如果添加“z-index：100;” （nav .nav li ul）将对您的问题进行排序。

z-index基本上是页面上的图层，因此通过将其设置为100，它将位于悬停上方的内容上。

我知道答案不好......我的第一个答案也是！

希望这有帮助！

Answer 2

您的链接在悬停时向左移动的原因是您已设置此媒体查询：

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

但是，您尚未为:hover设置padding: 10px;，因此它会从之前的设置样式中获取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*/
}

导航子菜单

2 个答案: