2017-03-07 73 views
1

我無法使我的下拉菜單正常工作。我無法使我的下拉菜單正常工作

這裏是我的jsfiddle

我也試圖與另一內部的UL,但它給了我同樣的結果。

$(function() { 
 
\t var n=$(".navbar"), 
 
\t \t ns="navbar-scrolled", 
 
\t \t head=$('header').height(); 
 
\t \t $(window).scroll(function() { 
 
\t \t \t \t if($(this).scrollTop() > head) { 
 
\t \t \t \t \t n.addClass(ns); 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t n.removeClass(ns); 
 
\t \t \t 
 
\t \t \t \t } 
 
\t }); 
 
});
.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

請張貼您的HTML以及。 – LuudJacobs

回答

2

您需要嵌套.dropdown-contentli.dropdown,不相鄰的它。然後你的目標是顯示.dropdown:hover .dropdown-menu的菜單。加.dropdown-menudiv,它不能是ul的直接孩子,所以這是無效的HTML無論如何。

然後從ul刪除overflow: hidden;,所以下拉菜單可以溢出該菜單。您將它作爲ul的「清除修補程序」,因此我添加了一個.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>

+0

非常感謝!花了我一段時間才明白.....我的英語很糟糕。但無論如何,你真棒,謝謝! –

+0

@ValentinDragoi歡迎您:) –

1

我想你的問題是造成缺少規則的閃爍,使下拉菜單的內容顯示塊徘徊在下拉列表中的內容時

只需添加這的CSS

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

可能你可以通過使用javascript解決此問題 我建議你ü檢查this link