Вопросы Теги

Как сохранить элемент списка в активном состоянии при наведении курсора на раскрывающийся список?

Я создаю раскрывающееся меню на своем веб-сайте и более или менее успешно выполнил задачу, кроме одного.

При наведении курсора на раскрывающееся меню исчезает состояние наведения указателя на ссылку в главном меню, поскольку я больше не нахожу на нем курсор.

Как я могу сохранить стиль активного состояния для ссылки при наведении курсора на раскрывающиеся элементы?

Я скопировал код на http://cssdesk.com/PZBM2 , если вы наводите курсор на первый list вы увидите состояние наведения, о котором я говорю, и раскрывающийся список.

Вот и код: 

/*Main nav*/
.main_nav_container{
    margin-top:10px;
    margin-bottom:10px;
    display:block;
    float:right;
}
ul.main_nav{
    margin:0;
    padding:0;
}
ul.main_nav li{
    display:inline-block;
    margin:0;
    padding:0;
}
ul.main_nav li a{
    font-size:13px;
    display:block;
    font-weight:bold;
    position:relative;
    height:25px;
    line-height:25px;
    padding:0 13px;
    text-decoration:none;
    color:#1122cc;
    border:1px solid transparent;
}
ul.main_nav li a:hover{
    text-decoration:underline !important;
    border-top:solid 1px #ccc;
    border-left:solid 1px #ccc;
    border-right:solid 1px #ccc;
}
ul.main_nav li ul{
    display:none;
    position:absolute;
    background: #fff;
    margin:0;
    padding:0;
    border:solid 1px #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}
ul.main_nav li ul:hover #hover{
    border:#ccc 1px solid;
}
ul.main_nav li ul li{
    display:block;
    margin:0;
    padding:0;
    text-align:left;
}
ul.main_nav li ul li a{
    font-weight:normal;
}
ul.main_nav li:hover ul{
    display:inline;
}

HTML

5
задан Rory McCrossan 9 January 2012 в 14:16
поделиться