Question

我刚刚实现了一个下拉菜单，当用户悬停/点击菜单图片时，该菜单会下降。

然而，只要用户向下滚动到section2，下拉菜单就会停止正常工作。当用户悬停/点击下拉图片时，它不会下拉，或者如果没有，则无法点击菜单项。

我无法看到其他部分如何影响固定下拉列表是否有效。

有什么建议吗？

感谢

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您在.header .dropdown元素

上缺少z-index

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

为什么下拉菜单只能在标题中正常工作？

1 个答案: