Ссылка CSS Menu остается выделенной

Question

Итак, я пробую свои силы в меню css, и у меня есть простая ошибка, которую я не могу исправить, и не нашел никакой помощи в ее поиске. Проблема заключается в том, что при наведении курсора на раскрывающееся меню родительская ссылка остается выделенной, а текст возвращается к исходному цвету. Надеюсь, это объясняет это. Вот код CSS, я уверен, что это вопрос добавления чего-либо или исправления строки кода. Вы можете проверить проблему здесь , все работает нормально, пока вы не посетите подменю (как в BAR или Info).

#nav, #nav ul {
    text-align: center;
    text-size:16px;
    float: left;
    width: 750px;
    height: 20px;
    list-style: none;
    line-height: 1;
    background: white;
    padding: 0;
    border: solid #000;
    border-width: 0px;
    border-bottom-width: 1px;
    margin: 0;
    background-image: url('/images/bg.gif');
}

#nav a {
    display: block;
    width: 75px;
    height: 20px;
    color: #0000FF;
    text-decoration: none;
}

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
}

#nav li {
    float: left;
    padding: 0;
    width: 75px;
}

#nav li ul { /*sub menu */
    position: absolute;
    left: -999em;
    height: auto;
    width: 75px;
    border: solid #000;
    border-width: 0px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    background-image: url('/images/submenu_bg.png');
}

#nav li li {
    width: 75px;
}

#nav li ul a {
    width: 75px;
}

#nav li ul ul {
    margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}

#nav li:hover, #nav li.sfhover {
    height: 20px;
    background: #0000FF;
}

Answer 1

Вы устанавливаете цвет текста на #nav a:hover, а цвет фона на #nav li:hover. Поскольку ваши подменю содержатся в li, они по-прежнему считаются парящими, даже если курсор находится в подменю. Подменю не содержит внутри ссылки, поэтому они не остаются выделенными и возвращаются к своему обычному цвету. Если вы хотите, чтобы пункт меню прекратил выделение, вместо этого переместите свойство background в #nav a:hover.

До:

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
}

#nav li:hover, #nav li.sfhover {
    height: 20px;
    background: #0000FF;
}

После того, как:

#nav a:hover, #nav li.sfhover a {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
    background: #0000FF;
}

В качестве альтернативы, если вы хотите, чтобы меню оставалось выделенным при наведении курсора на подменю (что выглядит лучше, IMO), переместите color на li:hover. Я знаю, что это немного многословно, но это работает. : -)

До:

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
    color: #FFF;
}

#nav li:hover, #nav li.sfhover {
    height: 20px;
    background: #0000FF;
}

После того, как:

#nav a:hover {
    display: block;
    width: 75px;
    height: 20px;
}

#nav li:hover a, #nav li.sfhover a {
    color:white;
}

#nav li:hover li a, #nav li.sfhover li a {
    color:blue;
}

#nav li:hover li a:hover, #nav li.sfhover li a:hover {
    color:white;
}

#nav li:hover, #nav li.sfhover {
    color: #FFF;
    height: 20px;
    background: #0000FF;
}

Answer 2

Вы можете попробовать установить цвет ссылки при наведении курсора на li, например так:

#nav li:hover a {
    color: #fff;
}

#nav li:hover li a
{
    color: #0000FF;
}