jquery - 我的下拉菜单无法工作

Question

我的下拉菜单无法工作。

这是我的 jsfiddle

我还尝试在另一个 ul 中使用 ul，但它给了我相同的结果。

$(function() {
	var n=$(".navbar"),
		ns="navbar-scrolled",
		head=$('header').height();
		$(window).scroll(function()  {
				if( $(this).scrollTop() > head) {
					n.addClass(ns);
				}
				else {
					n.removeClass(ns);
			
				}
	});
});

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown-content a {
  text-decoration: none;
  font-family: 'Open Sans', serif;
  color: black;
  font-weight: bold;
  padding: 10px 15px;
}

.dropdown:hover+.dropdown-content {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul class="navbar">
    <li class="dropdown">
      <hr id="tab1" /><a href="#">Models</a></li>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
    <li>
      <hr id="tab2" /><a href="#">News</a></li>
    <li>
      <hr id="tab3" /><a href="#">Contact</a></li>
    <li>
      <hr id="tab4" /><a href="#">Generations</a></li>
  </ul>
</div>

Answer 1

您需要将 .dropdown-content 嵌套在 li.dropdown 中，而不是与其相邻。然后，您的目标是使用 .dropdown:hover .dropdown-menu 显示菜单。另外，.dropdown-menu是一个div，它不能是ul的直接子级，因此无论如何它都是无效的html。

然后从 ul 中删除 overflow: hide;，以便下拉菜单可以溢出该菜单。您将其作为 ul 的“clearfix”，因此我添加了一个 .clear 类，该类利用伪类来清除元素，您可以使用它来清除元素。

$(function() {
  var n = $(".navbar"),
    ns = "navbar-scrolled",
    head = $('header').height();
  $(window).scroll(function() {
    if ($(this).scrollTop() > head) {
      n.addClass(ns);
    } else {
      n.removeClass(ns);

    }
  });
});

html {
  background: url(download.png) no-repeat center center;
  margin: 0 auto;
  display: inline-block;
}

body {
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  background: url(background.png) no-repeat center center;
  z-index: -999;
  background-attachment: fixed;
  background-size: cover
}

header {
  text-align: center;
  background-color: #e6e6e6;
  padding: 0;
  margin: 0;
  z-index: -200;
  transition: 1s;
  position: fixed;
  top: 0;
  width: 100%;
}

#tab1 {
  width: 70%;
  border: 0;
  border-radius: 6px;
  margin: 0;
  margin-left: 15.5%;
  margin-right: 15.5%;
  margin-top: 4px;
  height: 2px;
  color: white;
  background-color: #9f111d;
  transition: all 0.6s;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 72%);
}

#tab2 {
  width: 70%;
  border: 0;
  border-radius: 6px;
  margin: 0;
  margin-left: 15.5%;
  margin-right: 15.5%;
  margin-top: 4px;
  height: 2px;
  color: white;
  background-color: #9f111d;
  transition: 0.6s;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 72%);
}

#tab3 {
  width: 70%;
  border: 0;
  border-radius: 6px;
  margin: 0;
  margin-left: 15.5%;
  margin-right: 15.5%;
  margin-top: 4px;
  height: 2px;
  color: white;
  background-color: #9f111d;
  transition: 0.6s;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 72%);
}

#tab4 {
  width: 80%;
  border: 0;
  border-radius: 6px;
  margin: 0;
  margin-left: 10.5%;
  margin-right: 10.5%;
  margin-top: 4px;
  height: 2px;
  color: white;
  background-color: #9f111d;
  transition: 0.6s;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 72%);
}

.main {
  background: white;
  column-count: 2;
  width: 1060px;
  padding-top: 100px;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Open Sans', serif;
  font-weight: bold;
}

.navbar {
  text-align: center;
  margin-top: 150px;
  padding: 0;
  background-color: white;
  position: relative;
  z-index: 200;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}

header,
.navbar-scrolled {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
}

.navlink {
  text-decoration: none;
  top: 0;
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
  font-weight: bold;
}

.wrapper {
  margin-top: 150px;
  height: 42px;
  z-index: 200;
  background: #f2f2f2;
}

ul {
  list-style-type: none;
  position: relative;
  padding: 0;
  width: 100%;
  background-color: white;
}

.clear:after {
  content: "";
  display: table;
  clear: both;
}

li {
  float: left;
  transition: 1s;
}

li:hover:nth-child(1) > #tab1 {
  width: 75%;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 82%);
  margin-left: 13%;
  margin-right: 13%;
}

li:hover:nth-child(3) > #tab2 {
  width: 75%;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 82%);
  transition: 0.6s;
  margin-left: 13%;
  margin-right: 13%;
}

li:hover:nth-child(4) > #tab3 {
  width: 75%;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 82%);
  transition: 0.6s;
  margin-left: 13%;
  margin-right: 13%;
}

li:hover:nth-child(5) > #tab4 {
  width: 85%;
  background: radial-gradient(at 50% 50%, #9f111d 28%, white 82%);
  transition: 0.6s;
  margin-left: 8%;
  margin-right: 8%;
}

li a {
  font-family: 'Open Sans', serif;
  font-weight: bold;
  list-style-type: none;
  display: block;
  color: black;
  text-align: center;
  margin: 0;
  padding: 10px 20px;
  border-top: 5px white;
  text-decoration: none;
  background-color: white;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown-content a {
  text-decoration: none;
  font-family: 'Open Sans', serif;
  color: black;
  font-weight: bold;
  padding: 10px 15px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<body class="container">
  <header onmouseover="this.style.background='white'" onmouseout="this.style.background='#e6e6e6'">
    <img src="Photos\logo.png" width="210px" height="150px">
  </header>
  <div class="wrapper">
    <ul class="navbar clear">
      <li class="dropdown">
        <hr id="tab1" /><a href="#">Models</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li>
        <hr id="tab2" /><a href="#">News</a></li>
      <li>
        <hr id="tab3" /><a href="#">Contact</a></li>
      <li>
        <hr id="tab4" /><a href="#">Generations</a></li>
    </ul>
  </div>
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper tristique dolor vel suscipit. Nunc metus turpis, interdum at leo eget, dignissim convallis felis. Quisque id ante interdum, tincidunt magna iaculis, ultricies magna. Nulla ac
    posuere felis. Aliquam nibh dolor, maximus ut fermentum ut, ullamcorper sagittis odio. Vestibulum eu lectus id lorem lobortis eleifend. Nunc iaculis lectus in odio dictum feugiat. Integer eget urna id augue interdum tempor non sed dolor. Aenean et
    ligula ex. Phasellus eget ipsum non eros tincidunt tempus nec quis ligula. Duis facilisis lorem eget elit scelerisque, vel dignissim diam pretium. Nulla facilisi. Sed et efficitur urna. Aliquam luctus euismod mauris, et gravida sem porttitor nec.
    Integer ultricies quam ac luctus lacinia. Nullam convallis facilisis eleifend. Phasellus vitae tincidunt lorem, nec euismod turpis. Morbi auctor pulvinar dignissim. Phasellus iaculis, purus sit amet aliquet sodales, purus ante semper arcu, a interdum
    mauris neque et tortor. Quisque sagittis convallis dictum. Sed sit amet augue nisl. Quisque commodo leo mauris, ut faucibus mi dapibus non. Fusce nec elit iaculis dolor pretium suscipit. Cras pharetra aliquam tortor vel laoreet. Sed eleifend elementum
    eros, vel lobortis erat facilisis non. Integer vel velit sit amet arcu iaculis venenatis. Fusce odio orci, euismod at sapien ut, cursus porta dolor. Integer sit amet quam at arcu tristique pretium. Maecenas dui dui, eleifend id purus id, malesuada
    tempus eros. Phasellus in erat fermentum, pretium dui ut, finibus ante. Sed cursus risus ac porta maximus. In hac habitasse platea dictumst. Integer at vestibulum dui. Nulla erat nibh, lacinia pharetra volutpat vel, eleifend id sem. Nulla interdum
    porttitor sem quis molestie. Quisque imperdiet dolor in lorem tristique, a interdum tellus euismod. Etiam vel posuere turpis. In a vulputate tellus. Aenean eu placerat tortor. Maecenas eget congue mauris. In porttitor fringilla eros, eget vestibulum
    est mattis vitae. Suspendisse non porttitor sapien. Sed quis mi in elit bibendum rutrum non hendrerit purus. Nullam lobortis justo vel porta placerat. Quisque faucibus euismod risus, luctus lacinia urna. Vivamus suscipit ligula nunc, ultricies malesuada
    ante efficitur nec. Donec eu interdum ex. Nullam aliquet ultricies lacus ac tincidunt. Fusce gravida porttitor ipsum, ac malesuada augue ultricies vel. Sed eget tincidunt augue. Phasellus posuere tortor eu orci scelerisque volutpat. Fusce venenatis
    tellus felis, at laoreet ligula ultrices eu. Vivamus egestas mi in tellus egestas, non efficitur orci volutpat. Sed ut vestibulum velit. Suspendisse vitae velit id enim rutrum feugiat. Donec sed tempus dui, at ultricies ex. In blandit non nunc quis
    sollicitudin. Integer ac luctus urna. Cras sed ante pellentesque, eleifend odio ut, iaculis tortor. Fusce tincidunt risus id nisl fermentum dapibus. In laoreet, lacus vel euismod tristique, massa odio volutpat justo, at facilisis nulla elit at augue.
    Ut orci erat, ullamcorper ut feugiat id, interdum nec enim. Sed eros augue, accumsan congue efficitur vitae, rutrum sit amet diam. Sed pretium tincidunt tellus, quis suscipit arcu tempus quis. In hac habitasse platea dictumst. Mauris vehicula porttitor
    elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In nec lectus vitae magna elementum fringilla quis in turpis. Duis pulvinar enim eu nunc sodales venenatis. Donec tristique massa nec urna fringilla mollis. Sed rhoncus leo ac
    auctor mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper tristique dolor vel suscipit. Nunc metus turpis, interdum at leo eget, dignissim convallis felis. Quisque id ante interdum, tincidunt magna iaculis, ultricies
    magna. Nulla ac posuere felis. Aliquam nibh dolor, maximus ut fermentum ut, ullamcorper sagittis odio. Vestibulum eu lectus id lorem lobortis eleifend. Nunc iaculis lectus in odio dictum feugiat. Integer eget urna id augue interdum tempor non sed
    dolor. Aenean et ligula ex. Phasellus eget ipsum non eros tincidunt tempus nec quis ligula. Duis facilisis lorem eget elit scelerisque, vel dignissim diam pretium. Nulla facilisi. Sed et efficitur urna. Aliquam luctus euismod mauris, et gravida sem
    porttitor nec. Integer ultricies quam ac luctus lacinia. Nullam convallis facilisis eleifend. Phasellus vitae tincidunt lorem, nec euismod turpis. Morbi auctor pulvinar dignissim. Phasellus iaculis, purus sit amet aliquet sodales, purus ante semper
    arcu, a interdum mauris neque et tortor. Quisque sagittis convallis dictum. Sed sit amet augue nisl. Quisque commodo leo mauris, ut faucibus mi dapibus non. Fusce nec elit iaculis dolor pretium suscipit. Cras pharetra aliquam tortor vel laoreet. Sed
    eleifend elementum eros, vel lobortis erat facilisis non. Integer vel velit sit amet arcu iaculis venenatis. Fusce odio orci, euismod at sapien ut, cursus porta dolor. Integer sit amet quam at arcu tristique pretium. Maecenas dui dui, eleifend id
    purus id, malesuada tempus eros. Phasellus in erat fermentum, pretium dui ut, finibus ante. Sed cursus risus ac porta maximus. In hac habitasse platea dictumst. Integer at vestibulum dui. Nulla erat nibh, lacinia pharetra volutpat vel, eleifend id
    sem. Nulla interdum porttitor sem quis molestie. Quisque imperdiet dolor in lorem tristique, a interdum tellus euismod. Etiam vel posuere turpis. In a vulputate tellus. Aenean eu placerat tortor. Maecenas eget congue mauris. In porttitor fringilla
    eros, eget vestibulum est mattis vitae. Suspendisse non porttitor sapien. Sed quis mi in elit bibendum rutrum non hendrerit purus. Nullam lobortis justo vel porta placerat. Quisque faucibus euismod risus, luctus lacinia urna. Vivamus suscipit ligula
    nunc, ultricies malesuada ante efficitur nec. Donec eu interdum ex. Nullam aliquet ultricies lacus ac tincidunt. Fusce gravida porttitor ipsum, ac malesuada augue ultricies vel. Sed eget tincidunt augue. Phasellus posuere tortor eu orci scelerisque
    volutpat. Fusce venenatis tellus felis, at laoreet ligula ultrices eu. Vivamus egestas mi in tellus egestas, non efficitur orci volutpat. Sed ut vestibulum velit. Suspendisse vitae velit id enim rutrum feugiat. Donec sed tempus dui, at ultricies ex.
    In blandit non nunc quis sollicitudin. Integer ac luctus urna. Cras sed ante pellentesque, eleifend odio ut, iaculis tortor. Fusce tincidunt risus id nisl fermentum dapibus. In laoreet, lacus vel euismod tristique, massa odio volutpat justo, at facilisis
    nulla elit at augue. Ut orci erat, ullamcorper ut feugiat id, interdum nec enim. Sed eros augue, accumsan congue efficitur vitae, rutrum sit amet diam. Sed pretium tincidunt tellus, quis suscipit arcu tempus quis. In hac habitasse platea dictumst.
    Mauris vehicula porttitor elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In nec lectus vitae magna elementum fringilla quis in turpis. Duis pulvinar enim eu nunc sodales venenatis. Donec tristique massa nec urna fringilla
    mollis. Sed rhoncus leo ac auctor mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper tristique dolor vel suscipit. Nunc metus turpis, interdum at leo eget, dignissim convallis felis. Quisque id ante interdum, tincidunt
    magna iaculis, ultricies magna. Nulla ac posuere felis. Aliquam nibh dolor, maximus ut fermentum ut, ullamcorper sagittis odio. Vestibulum eu lectus id lorem lobortis eleifend. Nunc iaculis lectus in odio dictum feugiat. Integer eget urna id augue
    interdum tempor non sed dolor. Aenean et ligula ex. Phasellus eget ipsum non eros tincidunt tempus nec quis ligula. Duis facilisis lorem eget elit scelerisque, vel dignissim diam pretium. Nulla facilisi. Sed et efficitur urna. Aliquam luctus euismod
    mauris, et gravida sem porttitor nec. Integer ultricies quam ac luctus lacinia. Nullam convallis facilisis eleifend. Phasellus vitae tincidunt lorem, nec euismod turpis. Morbi auctor pulvinar dignissim. Phasellus iaculis, purus sit amet aliquet sodales,
    purus ante semper arcu, a interdum mauris neque et tortor. Quisque sagittis convallis dictum. Sed sit amet augue nisl. Quisque commodo leo mauris, ut faucibus mi dapibus non. Fusce nec elit iaculis dolor pretium suscipit. Cras pharetra aliquam tortor
    vel laoreet. Sed eleifend elementum eros, vel lobortis erat facilisis non. Integer vel velit sit amet arcu iaculis venenatis. Fusce odio orci, euismod at sapien ut, cursus porta dolor. Integer sit amet quam at arcu tristique pretium. Maecenas dui
    dui, eleifend id purus id, malesuada tempus eros. Phasellus in erat fermentum, pretium dui ut, finibus ante. Sed cursus risus ac porta maximus. In hac habitasse platea dictumst. Integer at vestibulum dui. Nulla erat nibh, lacinia pharetra volutpat
    vel, eleifend id sem. Nulla interdum porttitor sem quis molestie. Quisque imperdiet dolor in lorem tristique, a interdum tellus euismod. Etiam vel posuere turpis. In a vulputate tellus. Aenean eu placerat tortor. Maecenas eget congue mauris. In porttitor
    fringilla eros, eget vestibulum est mattis vitae. Suspendisse non porttitor sapien. Sed quis mi in elit bibendum rutrum non hendrerit purus. Nullam lobortis justo vel porta placerat. Quisque faucibus euismod risus, luctus lacinia urna. Vivamus suscipit
    ligula nunc, ultricies malesuada ante efficitur nec. Donec eu interdum ex. Nullam aliquet ultricies lacus ac tincidunt. Fusce gravida porttitor ipsum, ac malesuada augue ultricies vel. Sed eget tincidunt augue. Phasellus posuere tortor eu orci scelerisque
    volutpat. Fusce venenatis tellus felis, at laoreet ligula ultrices eu. Vivamus egestas mi in tellus egestas, non efficitur orci volutpat. Sed ut vestibulum velit. Suspendisse vitae velit id enim rutrum feugiat. Donec sed tempus dui, at ultricies ex.
    In blandit non nunc quis sollicitudin. Integer ac luctus urna. Cras sed ante pellentesque, eleifend odio ut, iaculis tortor. Fusce tincidunt risus id nisl fermentum dapibus. In laoreet, lacus vel euismod tristique, massa odio volutpat justo, at facilisis
    nulla elit at augue. Ut orci erat, ullamcorper ut feugiat id, interdum nec enim. Sed eros augue, accumsan congue efficitur vitae, rutrum sit amet diam. Sed pretium tincidunt tellus, quis suscipit arcu tempus quis. In hac habitasse platea dictumst.
    Mauris vehicula porttitor elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. In nec lectus vitae magna elementum fringilla quis in turpis. Duis pulvinar enim eu nunc sodales venenatis. Donec tristique massa nec urna fringilla
    mollis. Sed rhoncus leo ac auctor mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ullamcorper tristique dolor vel suscipit. Nunc metus turpis, interdum at leo eget, dignissim convallis felis. Quisque id ante interdum, tincidunt
    magna iaculis, ultricies magna. Nulla ac posuere felis. Aliquam nibh dolor, maximus ut fermentum ut, ullamcorper sagittis odio. Vestibulum eu lectus id lorem lobortis eleifend. Nunc iaculis lectus in odio dictum feugiat. Integer eget urna id augue
    interdum tempor non sed dolor. Aenean et ligula ex. Phasellus eget ipsum non eros tincidunt tempus nec quis ligula. Duis facilisis lorem eget elit scelerisque, vel dignissim diam pretium. Nulla facilisi. Sed et efficitur urna. Aliquam luctus euismod
    mauris, et gravida sem porttitor nec. Integer ultricies quam ac luctus lacinia. Nullam convallis facilisis eleifend. Phasellus vitae tincidunt lorem, nec euismod turpis. Morbi auctor pulvinar dignissim. Phasellus iaculis, purus sit amet aliquet sodales,
    purus ante semper arcu, a interdum mauris neque et tortor. Quisque sagittis convallis dictum. Sed sit amet augue nisl. Quisque commodo leo mauris, ut faucibus mi dapibus non. Fusce nec elit iaculis dolor pretium suscipit. Cras pharetra aliquam tortor
    vel laoreet. Sed eleifend elementum eros, vel lobortis erat facilisis non. Integer vel velit sit amet arcu iaculis venenatis. Fusce odio orci, euismod at sapien ut, cursus porta dolor. Integer sit amet quam at arcu tristique pretium. Maecenas dui
    dui, eleifend id purus id, malesuada tempus eros. Phasellus in erat fermentum, pretium dui ut, finibus ante. Sed cursus risus ac porta maximus. In hac habitasse platea dictumst. Integer at vestibulum dui. Nulla erat nibh, lacinia pharetra volutpat
    vel, eleifend id sem. Nulla interdum porttitor sem quis molestie. Quisque imperdiet dolor in lorem tristique, a interdum tellus euismod. Etiam vel posuere turpis. In a vulputate tellus. Aenean eu placerat tortor. Maecenas eget congue mauris. In porttitor
    fringilla eros, eget vestibulum est mattis vitae. Suspendisse non porttitor sapien. Sed quis mi in elit bibendum rutrum non hendrerit purus. Nullam lobortis justo vel porta placerat. Quisque faucibus euismod risus, luctus lacinia urna. Vivamus suscipit
    ligula nunc, ultricies malesuada ante efficitur nec. Donec eu interdum ex. Nullam aliquet ultricies lacus ac tincidunt. Fusce gravida porttitor ipsum, ac malesuada augue ultricies vel. Sed eget tincidunt augue. Phasellus posuere tortor eu orci scelerisque
    volutpat. Fusce venenatis tellus felis, at laoreet ligula ultrices eu. Vivamus egestas mi in tellus egestas, non efficitur orci volutpat. Sed ut vestibulum velit. Suspendisse vitae velit id enim rutrum feugiat. Donec sed tempus dui, at ultricies ex.
    In blandit non nunc quis sollicitudin. Integer ac luctus urna. Cras sed ante pellentesque, eleifend odio ut, iaculis tortor. Fusce tincidunt risus id nisl fermentum dapibus. In laoreet, lacus vel euismod tristique, massa odio volutpat justo, at facilisis
    nulla elit at augue.
  </div>
</body>