на основе CSS при наведении ссылки активировать / деактивировать div - PullRequest
Новая
       35

на основе CSS при наведении ссылки активировать / деактивировать div

2 голосов
/ 17 октября 2011

любая идея, что я пропускаю по ссылке: ** http://jsfiddle.net/AnUZ7/2/ **

Я пытаюсь сделать выпадающее меню, как в Zerply

enter image description here

<a href="#" class="setting">Setting</a>

<ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
</ul>

css здесь: 

ul {
    position: absolute;
    background: orange;
    width: 10em;
    left: -999em; 
}

a.setting:hover ul {
    left: auto;
}

Спасибо!

1 Ответ

1 голос
/ 17 октября 2011

Попробуйте заменить a.setting:hover ul {...} на 

a.setting:hover + ul,
ul.submenu:hover {...}

Отредактированная скрипка: http://jsfiddle.net/AnUZ7/4/

Селектор .first + .second выбирает следующий элемент после .first.
Селектор .first ~ .after-first выбирает все элементы после .first.
Эти селекторы не работают в Internet Explorer 6, но, надеюсь, это не большая проблема в 2011 году.

Остерегайтесь (возможного) поля / отступов / других пробелов между a и ul в вашем фактическом дизайне! Если указатель мыши окажется между ними, меню исчезнет.

...