CODEWITHSUNDEEP
htmlcsshoverdrop-down-menuvisibility
Ilja
Ilja

Reputation: 46479

Display div on hover of different element

I'm trying to build a css drop down menu. I have a div #category_list which is hidden and I want to display it once user hover over #category_drop list element. I tried 

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

But this doesn't work. Can you please suggest any solution?

My full 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 Fiddle of a current situation http://jsfiddle.net/nzC65/2/

Upvotes: 0

Views: 1902

Answers (1)

techfoobar
techfoobar

Reputation: 66663

Please note that :hover doesn't work for non-anchor (a tag) on older browsers.

Secondly in your code, category_list is not a child of category_drop and hence your CSS will not actually match any elements.

Check this fiddle for a working implementation: http://jsfiddle.net/YT8YR/

Upvotes: 1

Related Questions