Показывать div при наведении на другой элемент - PullRequest
Новая
       32

Показывать div при наведении на другой элемент

0 голосов
/ 18 декабря 2011

Я пытаюсь создать выпадающее меню 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/

1 Ответ

1 голос
/ 18 декабря 2011

Обратите внимание, что: hover не работает для не-якоря (тега) в старых браузерах.

Во-вторых, в вашем коде category_list не является дочерним для category_drop, и, следовательно, ваш CSS на самом деле не будет соответствоватьлюбые элементы.

Проверьте эту скрипку для работающей реализации: http://jsfiddle.net/YT8YR/

...