Блог

Главная - Вопросы по программированию - Выпадающее меню CSS с другим цветом

Выпадающее меню CSS с другим цветом

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

У меня есть выпадающее меню CSS, работающее следующим образом: 

 <ul>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>

и CSS:

 ul{
    padding: 0;
    list-style: none;
}
ul li{
    float: left;
    width: 100px;
    text-align: center;
}
ul li a{
    display: block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
}
ul li a:hover{
    color: #87a0b4;
    background: #fff;
}
ul li ul{
    display: none;
}
ul li:hover ul{
    display: block;
    position: absolute;
    width: 100px;
    z-index: 100; /* display the dropdown */
}

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

Ответ №1:

Вы должны указать, к каким элементам хотите применить изменения стиля.

Здесь выбирается первое подменю:

 ul > li:first-child > ul > li a:hover{
    color: #87a0b4;
    background: yellow;
}

При этом выбирается второе подменю:

 ul > li:nth-child(2) > ul > li a:hover{
    color: #87a0b4;
    background: blue;
}

Это меняет Link1 цвет при наведении курсора:

 ul > li:first-child a:hover{
    color: #87a0b4;
    background: blue;
}

Вы можете продолжить и применить любой эффект, который вы хотите. Надеюсь, это поможет 🙂

скрипка

Комментарии:

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

Ответ №2:

ul li — целевые пункты списка главного меню

ul li ul li — целевые элементы списка подменю

Чтобы изменить стиль подменю. Вы можете использовать что-то вроде этого.

 ul li ul li {
    background-color:red;
}
ul li ul li a {
    color:green;
}

Смотрите http://jsfiddle.net/2Nh47 /