爲什麼下拉菜單隻能在標題中正常工作？

Question

我剛剛實現了一個下拉菜單，當用戶懸停/點擊菜單圖像時會下拉菜單。

然而，只要用戶向下滾動到第2部分，然後下拉停止正常工作。當用戶懸停/點擊下拉圖片時，它不會下拉，或者如果是，則無法點擊菜單項。

我看不出其他部分如何影響固定下拉是否工作。

有什麼建議嗎？

感謝

var main = function() { 
 
    $(".dropdown img").click(function() { 
 
    $(".dropdown-menu").slideDown("slow"); 
 
    }); 
 

 
    $(".dropdown img").mouseenter(function() { 
 
    $(".dropdown-menu").slideDown("slow"); 
 
    }); 
 

 
    $(".dropdown ul").mouseleave(function() { 
 
    $(".dropdown-menu").slideUp("slow"); 
 
    }); 
 

 
    $(window).scroll(function() { 
 
    $(".dropdown-menu").slideUp(); 
 
    $(".dropdown img").removeClass("rotate"); 
 
    }); 
 

 
    $(".dropdown img").mouseenter(function() { 
 
    $(".dropdown img").addClass("rotate"); 
 
    }); 
 

 
    $(".dropdown-menu").mouseleave(function() { 
 
    $(".dropdown img").removeClass("rotate"); 
 
    }); 
 
}; 
 

 
$(document).ready(main);

html, 
 
body { 
 
    font-size: 100%; 
 
    height: 100% 
 
} 
 

 
/*Header*/ 
 
.dropdown img { 
 
    height: 2.5em; 
 
    width: 3.5em; 
 
} 
 
.dropdown-menu { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
} 
 
.header { 
 
    background: url(/img/sri.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    position: relative; 
 
    box-shadow: inset 0 0 0 1000px rgba(125, 132, 145, 0.6); 
 
    min-height: 100% 
 
} 
 
.header ul li a { 
 
    color: #fff; 
 
} 
 
.header .logo { 
 
    float: left; 
 
    margin-top: 0.42em; 
 
} 
 
#rowheader { 
 
    margin-top: 5em; 
 
} 
 
.header .dropdown { 
 
    margin-top: 0.42em; 
 
    position: fixed; 
 
    right: 2em; 
 
} 
 
.dropdown img { 
 
    border-radius: 50%; 
 
    background: black; 
 
    height: 3em; 
 
    width: 3em; 
 
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s; 
 
    /* Safari */ 
 
    transition: width 1s, height 1s, transform 1s; 
 
} 
 
.rotate { 
 
    -webkit-transform: rotate(180deg); 
 
    /* Safari */ 
 
    transform: rotate(180deg); 
 
} 
 
.dropdown ul { 
 
    left: -8em; 
 
    width: auto; 
 
    position: absolute; 
 
} 
 
.header .logo p { 
 
    font-size: 1em; 
 
    color: black; 
 
    font-family: 'Permanent Marker', cursive; 
 
    font-weight: bold; 
 
} 
 
#rowheader h1 { 
 
    font-weight: bolder; 
 
    font-size: 3em; 
 
    position: relative; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
/*Section1*/ 
 

 
#section1 { 
 
    text-align: center; 
 
    margin-top: 3em; 
 
    margin-bottom: 3em; 
 
    font-size: 1em; 
 
    height: auto; 
 
    position: relative; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 
#section1 h2 { 
 
    font-size: 2em; 
 
    font-weight: bolder; 
 
    text-align: center; 
 
    padding: 0 2.5em 1em; 
 
    display: block; 
 
} 
 
#section1 p { 
 
    line-height: 1.8em; 
 
    font-size: 0.9em; 
 
    padding: 1em 0; 
 
} 
 
#section1 a { 
 
    color: #fff; 
 
    background: #007bb6; 
 
    text-decoration: none; 
 
    padding: 0.1em 0.5em; 
 
    border-radius: 5px 5px 5px 5px; 
 
} 
 
#section1 a:hover { 
 
    background: #005983 
 
} 
 
/*Section2*/ 
 

 
#section2 { 
 
    line-height: 1.8em; 
 
    height: auto; 
 
    margin-top: 2em; 
 
    margin-bottom: 2em; 
 
    position: relative; 
 
} 
 
#section2 h2 { 
 
    font-size: 2em; 
 
    font-weight: bolder; 
 
    text-align: center; 
 
    padding: 0 2.5em 1em; 
 
    display: block; 
 
} 
 
#section2 p { 
 
    padding: 0 0 0.5em; 
 
    font-family: 'Open Sans', sans-serif; 
 
    padding-bottom: 2em; 
 
} 
 
#section2 img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#img-wrapper { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 
#img-wrapper img { 
 
    -webkit-transition: all .2s ease; 
 
    -moz-transition: all .2s ease; 
 
    -ms-transition: all .2s ease; 
 
    -o-transition: all .2s ease; 
 
    transition: all .2s ease; 
 
} 
 
#img-wrapper img:hover { 
 
    -webkit-transform: scale(1.1); 
 
    /* Safari and Chrome */ 
 
    -moz-transform: scale(1.1); 
 
    /* Firefox */ 
 
    -ms-transform: scale(1.1); 
 
    /* IE 9 */ 
 
    -o-transform: scale(1.1); 
 
    /* Opera */ 
 
    transform: scale(1.1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
 
<!-- Header --> 
 
<div class="header"> 
 
    <div class="container"> 
 
    <div class="logo"> 
 
     <p>???</p> 
 
    </div> 
 
    <div class="dropdown"> 
 
     <img src="img/menuwhite.jpg"> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Find me on Linkedin</a> 
 
      <li> 
 
      <li><a href="#">Send me an email</a> 
 
      </li> 
 
      <li><a href="#" download="Resume">Download my resume</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div id="rowheader"> 
 
     <h1></h1> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Section1 --> 
 
<div id="section1" class="container"> 
 
    <h2>About</h2> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
     <h3>Me</h3> 
 
     <p>blablablabla</p> 
 
     <p>blablablablablablablablablqblablablablablablablablablablablablablablabla</p> 
 
    </div> 
 

 
    <!-- Section2 --> 
 
    <div id="section2" class="container"> 
 
     <h2>My Projects</h2> 
 
     <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
      <div id="img-wrapper"> 
 
      <a href="" "><img src=" ""></a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 1

您.header .dropdown元素缺失的z-index

.header .dropdown { 
    margin-top: 0.42em; 
    position: fixed; 
    right: 2em; 
    z-index: 20; 
}