VPF::Не меняется цвет в выпадающем меню

zailax

Дата 2.4.2016, 23:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 18
Регистрация: 26.10.2011

Репутация: нет
Всего: нет

Есть выпадающее меню. Первый уровень идет горизонтальной строкой, остальные раскрываются вниз. В неактивном состоянии цвет текста 1 при наведении курсора на первый уровень нужно чтобы цвет ссылок менялся на цвет 2, а в раскрывшемся меню второго уровня цвет оставался 1 (сейчас он меняется вместе с первым уровнем на цвет 2) и только при наведении курсора на пункты меню, цвет менялся бы на цвет 2.
Не срабатывает эта строка

Код


.menu ul li>ul a {color: #656565;}

Код


<div class="menu">
                    <ul>
                        <li><a href="1.html">menu1</a>
                            <ul>
                                <li><a href="1.html">menu1-1</a></li>
                                <li><a href="1.html">menu1-2</a></li>
                                <li><a href="1.html">menu1-2</a></li>
                            </ul>
                        </li>
                        <li><a href="1.html">menu2</a>
                            <ul>
                                <li><a href="1.html">menu2-1</a></li>
                                <li><a href="1.html">menu2-2</a></li>
                            </ul>
                        </li>
                        <li><a href="1.html">menu3</a></li>
                        <li><a href="1.html">menu4</a></li>
                    </ul>
                </div>

Код


.menu { color: #656565; }

.menu ul {
    float:left;
    width:100%;
    list-style:none;
    background-color:#edf3fa;
    line-height: 50px;
}
.menu ul a { text-decoration:none; color: #656565;}
.menu ul li { 
    float:left;
    width:192px;
    height: 50px;
    cursor: pointer;
}

.menu ul li:hover{
    color:#edf3fa;
    background-color:#8ccdf6;
    transition-duration:0.5s;
}
.menu ul li:hover a { color:#edf3fa;}

.menu ul li>ul { 
    color: #656565;
    position:absolute;
    z-index:9999;
    width:300px;
    margin-top:0px;
    padding:0;
    display:none;
    background-color:#e2e2e2;
    text-align: left;
    text-indent: 10px;
    line-height: 50px;
}
.menu ul li>ul a {color: #656565;}
.menu ul li:hover>ul { display:block; }
.menu ul li>ul li { width:300px; }
.menu ul li>ul li:hover{color:#edf3fa; background-color:#b5b5b5; }
.menu ul li>ul>li>ul { position:absolute; z-index:9999; width:192px; margin: -21px 0 0 300px; padding:0; background-color:#edf3fa; }

так же попутный вопрос как сделать ссылками не только текст, но и всю кнопку целиком?

Это сообщение отредактировал(а) zailax - 4.4.2016, 23:04

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »