html - 下拉菜单中的点击行为不一致

我发现此代码可以在我的网站上创建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;
}

谢谢！

最佳答案

您的网站使用Bootstrap和jQuery吗？我曾经遇到过这个问题，而我要做的就是在包含Bootstrap文件之前先包含jQuery文件，如下所示：

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

另外，如果您使用的是Bootstrap，请检查是否在不同的地方没有多次包含它。

关于html - 下拉菜单中的点击行为不一致，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36960911/