在不同元素悬停时显示 div

Question

我正在尝试构建一个 CSS 下拉菜单。 我有一个隐藏的 div #category_list，一旦用户将鼠标悬停在 #category_drop 列表元素上，我想显示它。我试过了

#category_drop:hover #category_list {visibility: visible;}

但这不起作用。您能提出任何解决方案吗？

我的完整 HTML

<div id="headbar-wrap">
<p id="back-top"><a href="#top"><span></span></a></p>
    <div id="head-bar">
        <h1><a href="http://website.com/">website</a></h1>
        <ul class="main-menu">
            <li><a class="st_nav_menu" href="index.php">Home</a></li>
            <li id="category_drop"><a class="st_nav_menu" href="#">Categories</a></li>
            <li><a class="st_nav_menu" href="top.php">Top</a></li>
            <li><a class="st_nav_menu" href="anti-top.php">Anti Top</a></li>
            <li class="st_add_button"><a href="#">Add Story</a></li>
        </ul>
        <ul class="main-2-menu">
        <li><a><span style="color: red; font-weight: bold; font-size: 16px; line-height: 44px; padding: 0 10px 0 10px;">Website is under construction.</span></a></li>
        </ul>
        <!-- this is a hidden drop down menu -->
        <div id="category_list" style="height: 400px; width: 500px; background: #000; position: absolute; z-index: 999; top: 45px; visibility: hidden;"></div>
    </div>
</div>

js 现状http://jsfiddle.net/nzC65/2/

Answer 1

请注意 :hover 不适用于旧版浏览器上的非锚点（标签）。

其次，在您的代码中，category_list 不是 category_drop 的子级，因此您的 CSS 实际上不会匹配任何元素。

检查这个小提琴的工作实现：http://jsfiddle.net/YT8YR/