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>

当前情况的小提琴http://jsfiddle.net/nzC65/2/

Answer 1

请注意：hover对旧浏览器上的非锚点（标记）不起作用。

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

检查这个小提琴是否有效：http://jsfiddle.net/YT8YR/

显示不同元素悬停时的div

1 个答案: