Javascript 悬停时显示div

我想在悬停文本框时显示一个类似菜单的div，但由于某些原因它没有显示出来

这是我的css

     .search:hover  #search_drop {
    display:block;
 }


     #search_drop {
        display:none;
        height:500px;
        width:500px;
        background:#000;
        position:absolute;
        top:0px;
     }

这是html

     <div id="navigation_s" style="float:left">
       <ul >
         <li > 
           <div class="search">
             <div id="search_drop"> test </div>
              <form action="" id="searchform">
               <input type="text" name="search" id="searchbox" placeholder="looking for something?"/>
               <input type="submit" id="searchbutton" value="go"/>
              </form>
           </div>
         </li>
       </ul>
     </div>

试验

---

我要做的就是将鼠标悬停在“搜索”上。应该显示“搜索”下拉列表，但它没有出现。

您不能将鼠标悬停在未显示的节点上。

display:none

->它不在您的页面上。所以，你不能在上面悬停。这同样适用于隐藏 但是，我们可以改变其他属性。比如说,

#search {
 border : 1px green solid;
}
#search:hover {
 border : 5px red solid;
}

<div id="search">
abcdefgh
abcdefgh
abcdefgh
</div>

#搜索{
边框：1px绿色实心；
}
#搜索：悬停{
边框：5px红色实心；
}
abcdefgh
abcdefgh
abcdefgh

对我有效你的html不完整，（）工作正常，小心你的html，缺失的可能是你在某些浏览器中的bug的根源，在那里尝试一下，出于某种原因，如果你需要关于此问题的任何信息而不是我的答案……使用javascript onmouseover=”“触发一个事件来切换可见性。。。这将允许您从.search元素调用它。