Добрый день! Помогите решить вопрос. Есть dropdown меню (белый буквы и черные фон) открывается при наведении, цвет и текст основного меню меняет цвет (черные буквы и белый фон), но при переходе мышью в открытое окно dropdown-menu (черные буквы и белый фон), у основного меню возвращается в исходные стили (белый буквы и черные фон). Хочу чтоб фон основного меню оставался как фон дочернего элемента dropdown-menu (черные буквы и белый фон).
Побывал так и по разному, не работает:
| CSS |
1
2
3
4
5
6
7
8
| .page-header-middle .navbar .nav>li>a:hover {
background-color: #fff;
color: #333;
}
.page-header-middle .navbar .nav>li>a:hover .dropdown {
background-color: #fff;
color: #333;
} |
|
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| <ul class="nav products-nav">
<!-- Каталог -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Каталог </a>
<ul class="dropdown-menu" style="display: none;">
<li>
<div class="yamm-content">
<ul class="span2 unstyled">
<li class="lv2"><a href="catalog/kategoriya-1.html">Категория-1</a></li>
<ul><li class="lv4"><a href="/catalog/kategoriya-1/tovar-1-12.html" title="Товар-1-1">Товар-1-1</a></li>
<li class="lv4 active"><a href="/catalog/kategoriya-1/tovar-1-22.html" title="Товар-1-2">Товар-1-2</a></li>
<li class="lv4"><a href="/catalog/kategoriya-1/tovar-1-32.html" title="Товар-1-3">Товар-1-3</a></li>
<li class="lv4 last"><a href="/catalog/kategoriya-1/tovar-1-42.html" title="Товар-1-4">Товар-1-4</a></li>
</ul>
</ul>
<ul class="span2 unstyled">
<li class="lv2"><a href="catalog/kategoriya-1.html">Категория-2</a></li>
<ul><li class="lv4"><a href="/catalog/kategoriya-2/tovar-2-13.html" title="Товар-2-1">Товар-2-1</a></li>
<li class="lv4"><a href="/catalog/kategoriya-2/tovar-2-22.html" title="Товар-2-2">Товар-2-2</a></li>
<li class="lv4"><a href="/catalog/kategoriya-2/tovar-2-32.html" title="Товар-2-3">Товар-2-3</a></li>
<li class="lv4 last"><a href="/catalog/kategoriya-2/tovar-2-42.html" title="Товар-2-4">Товар-2-4</a></li>
</ul>
</ul>
<ul class="span2 unstyled">
<li class="lv2"><a href="catalog/kategoriya-1.html">Категория-3</a></li>
<ul><li class="lv4"><a href="/catalog/kategoriya-3/tovar-3-11.html" title="Товар-3-1">Товар-3-1</a></li>
<li class="lv4"><a href="/catalog/kategoriya-3/tovar-3-21.html" title="Товар-3-2">Товар-3-2</a></li>
<li class="lv4"><a href="/catalog/kategoriya-3/tovar-3-31.html" title="Товар-3-3">Товар-3-3</a></li>
<li class="lv4 last"><a href="/catalog/kategoriya-3/tovar-3-41.html" title="Товар-3-4">Товар-3-4</a></li>
</ul>
</ul>
<ul class="span2 unstyled">
<li class="lv2"><a href="catalog/kategoriya-1.html">Категория-4</a></li>
<ul><li class="lv4"><a href="/catalog/kategoriya-4/tovar-4-11.html" title="Товар-4-1">Товар-4-1</a></li>
<li class="lv4"><a href="/catalog/kategoriya-4/tovar-4-21.html" title="Товар-4-2">Товар-4-2</a></li>
<li class="lv4"><a href="/catalog/kategoriya-4/tovar-4-31.html" title="Товар-4-3">Товар-4-3</a></li>
<li class="lv4 last"><a href="/catalog/kategoriya-4/tovar-4-41.html" title="Товар-4-4">Товар-4-4</a></li>
</ul>
</ul>
</div>
</li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</ul> |
|
Как присвоить при наведении на дочерний элемент, родителю такой же стиль?
Добавлено через 1 час 34 минуты
Оказалось все проще пареной репы ))
| CSS |
1
2
|
#m1:hover a, #m2:hover a, #m3:hover a, #m4:hover a {background-color: #fff;color: #333;} |
|
| HTML5 |
1
2
3
4
5
6
7
8
| <ul class="nav products-nav">
<!-- Каталог -->
<li class="dropdown" id="m1">
<a href="#" id="m1" class="dropdown-toggle" data-toggle="dropdown"> Каталог </a>
<ul class="dropdown-menu" id="m1">
</ul>
</li>
</ul> |
|
(
