ドロップダウンメニューの不一致のクリック動作

Question

私のサイトにCSSドロップダウンメニューを作成するためにこのコードが見つかりました。ただし、クリックの動作には一貫性がありません。時には複数回連続して動作し、同じ領域をクリックしても機能しないことがあります。この仕事をより良くするために私ができることはありますか？

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

ありがとうございます！

Answer 1

あなたのウェブサイトはブートストラップとjQueryを使用していますか？私は一度、この問題を持っていたし、私がしなければならなかったすべては、このように、私のブートストラップファイルを含む前に、私のjQueryのファイルをインクルードすることでした。

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

また、あなたはブートストラップを使用している場合、あなたはそれを複数回含めていないことを確認してください別の場所で。