Inkonsistentes Klickverhalten im Dropdown-Menü

Question

Ich habe diesen Code gefunden, um ein CSS-Dropdown-Menü auf meiner Website zu erstellen. Das Klickverhalten ist jedoch inkonsistent. Manchmal funktioniert es mehrmals hintereinander und manchmal funktioniert es auch nicht, selbst wenn ich auf den gleichen Bereich klicke. Kann ich etwas tun, um diese Arbeit besser zu machen?

HTML:

<form class="searchbox" action=""> 
    <input type="search" placeholder="search.." /> 
    <ul class="suggestions"> 
     <li><a href="/about">About</a></li> 
     <li><a href="/intro">Home</a></li> 
     <li><a href="/video-games">Video Games</a></li> 
     <li><a href="/theatre">Theatre</a></li> 
    </ul> 
</form> 

CSS:

body{ 
/*changing background color*/ 
background-color:#ebebeb; 
} 
.searchbox{ 
/*definint width of form element*/ 
    width:350px; 
/*centering the form element*/ 
    margin:100px auto; 
} 
input[type="search"]{ 
    padding:10px 15px 10px 50px; 
    font-size:36px; 
    color:#1f5350; 
/*removing boder from search box*/ 
    border:none; 
/*defining background image as a search symbol*/ 
    background-color:#7accc8; 
} 
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/ 
input[type="search"]::-webkit-input-placeholder{ 
    color:#b1e0de; 
} 
input[type="search"]:-moz-placeholder { /* Firefox 18- */ 
    color: #b1e0de; 
} 
input[type="search"]::-moz-placeholder { /* Firefox 19+ */ 
    color: #b1e0de; 
} 
input[type="search"]:-ms-input-placeholder { /* interner explorer*/ 
    color: #b1e0de; 
} 
.searchbox a{ 
    display:block; 
/*removing underlines from anchor element*/ 
    text-decoration:none; 
    color:#1f5350; 
    font-size:30px; 
    background-color:#ace5e2; 
    padding:10px; 
} 
.searchbox ul{ 
/*removing predefined bullet points from list*/ 
    list-style:none; 
/*removing padding from list items*/ 
    padding:0; 
    width:465px; 
} 
.searchbox ul li{ 
    margin-bottom:10px; 
} 
/*adding effect when the mouse is hovered over list item*/ 
.searchbox ul li a:hover{ 
    color:#b23b61; 
    background:#ecd1da; 
} 
/*moving it slightly toware right when hovered*/ 
.searchbox ul li:hover{ 
/*transform*/ 
-webkit-transform:translateX(20px); 
    -moz-transform:translateX(20px); 
    -ms-transform:translateX(20px); 
    -o-transform:translateX(20px); 
     transform:translateX(20px); 
} 
/*now first we will hide the suggestion list*/ 
.suggestions li{ 
    overflow:hidden; 
    height:0; 
    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    -o-transition:all 0.3s ease-in-out; 
     transition:all 0.3s ease-in-out; 
} 
/*and make the suggestion reappear when user focus on search field*/ 
input[type="search"]:focus + .suggestions li{ 
    height:63px; 
} 

.byline{ 
    text-align:center; 
    font-size:18px; 
} 
.byline a{ 
    text-decoration:none; 
    color: #1f5350; 
} 

Thank you!

Answer 1

Verwendet Ihre Website Bootstrap und jQuery? Ich hatte dieses Problem einmal und alles, was ich tun musste, war, meine jQuery-Datei enthalten, bevor meine Bootstrap-Datei einschließlich, wie folgt aus:

<script type="text/javascript" src="js/jquery-X.X.X.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 

Auch wenn Sie Bootstrap verwenden, prüfen Sie, dass Sie es nicht sind, die mehrere Male an verschiedenen Orten.