我无法使用我的下拉菜单。
这是我的jsfiddle
此外，我尝试使用另一个内部的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>
答案 0 :(得分：2)
您需要在.dropdown-content中嵌套li.dropdown，而不是与.dropdown:hover .dropdown-menu相邻。然后，您将使用.dropdown-menu显示菜单。加div是ul，它不能是overflow: hidden;的直接子项，因此无论如何都是无效的html。
然后从ul移除ul，以便下拉菜单可以溢出该菜单。您将其作为.clear的“clearfix”，因此我添加了一个$(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>function fbTransaction(childRef) {
var qTrans = Q.defer();
firebase.database().ref(childRef).transaction()
.then(function(success){
qTrans.resolve(success);
}).catch(function(error){
qTrans.reject(error);
});
return qTrans.promise;
};
答案 1 :(得分：1)
我猜您的问题是由于在将鼠标悬停在下拉内容时丢失规则导致下拉内容显示阻止而引起的闪烁
只需将其添加到css
即可.dropdown:hover + .dropdown-content {
display: block;
}
可能你可以用javascript来解决这个问题 我建议你查看this link