Используйте CSS, чтобы сохранить эффект наведения навигации верхнего уровня, когда мышь находится над подменю - PullRequest
Новая
       4

Используйте CSS, чтобы сохранить эффект наведения навигации верхнего уровня, когда мышь находится над подменю

2 голосов
/ 25 февраля 2012

Когда вы наводите курсор мыши на элемент навигации, цвет ссылки меняется на белый, а фон этой ссылки становится черным. Состояние наведения делает отображение: блок на скрытом вложенном. Когда я перемещаю мышь к вложенному элементу (то есть к подменю), состояние наведения на навигационной панели верхнего уровня возвращается к тому, что было. Как сделать так, чтобы моя мышь находилась над подменю?

Другими словами, при наведении на ссылку «Что мы делаем» цвет шрифта меняется на #fff, а фон - на # 111, и появляется ul.sub-меню с тем же черным фоном и белым текстом. Это все появляется, пока моя мышь наводит курсор на «Что мы делаем», но как только он перемещается в подменю, фон «Что мы делаем» возвращается к своему первоначальному цвету, а цвет шрифта меняется на черный. Тем временем мое подменю остается открытым в правильном формате. Как заставить «состояние» сохраняться, когда я убираю курсор мыши?

Вот jsfiddle для этого: http://jsfiddle.net/U77re/

nav ul#menu-top-nav { position: absolute; top: 35px; left: 113px; padding: 16px 30px 17px 20px; width: 797px; background: #F0F1F4;}
nav ul#menu-top-nav li { position: relative; float: left; margin: 0 40px 0 0; }
nav ul#menu-top-nav li a:hover { color: #fff; background: #111;  }
nav ul#menu-top-nav li#menu-item-1186 { margin-right: 0; }
nav ul#menu-top-nav ul.sub-menu { display: none; }
nav ul#menu-top-nav ul.sub-menu li a { margin: 0; }

nav ul#menu-top-nav li:hover ul.sub-menu { display: block; position: absolute; left:0; top: 30px; width: 250px; padding: 20px;
                                    z-index: 1; background: #111; }

nav ul#menu-top-nav  ul.sub-menu p { margin: 0 0 25px 0; color: #fff; line-height: 1.4; font-weight: bold; }
nav ul#menu-top-nav  ul.sub-menu li { width: 250px; margin: 0 0 20px 20px; color: #fff; list-style-position: inside; list-style-type: disc;  }
nav ul#menu-top-nav  ul.sub-menu li a { color: #fff;  }

<nav role="navigation">
    <ul class="menu" id="menu-top-nav">
    <li id="menu-item-1596"><a href="http://localhost:8888/what-we-do/">What we do</a>
        <ul class="sub-menu">
            <p>Explore what we do and the people behind it</p>
            <li id="menu-item-1600"><a href="/what-we-do/about/">About IFSW</a></li>
            <li id="menu-item-1604"><a href="/what-we-do/partners/">Partners</a></li>
            <li id="menu-item-1601"><a href="/what-we-do/contact/">Contact</a></li>
        </ul>
    </li>
</ul>
</nav>

1 Ответ

7 голосов
/ 25 февраля 2012

Переключите ваше событие наведения с элемента привязки a на элемент li, например: 

nav ul#menu-top-nav li:hover a { color: #fff; background: #111;  }
...