Доработать меню, нужна подсказка

@Андрей Бойченко · Регистрация: 23.06.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте! Вот код меню, это только заготовка)

Кликните здесь для просмотра всего текста

HTML5

<div id="parent">
<ul class="menu">
<li><a href="">menu</a>
    <ul>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    </ul>
</li>
<li><a href="">menu</a>
    <ul>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    </ul>
</li>
<li><a href="">menu</a>
    <ul>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    <li><a href="">sub-menu</a></li>
    </ul>
</li>
</ul>
</div>

Кликните здесь для просмотра всего текста

CSS

#parent{
width: 100%;
height: 70px;
border: 1px solid;
position: relative;
background: #000;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#parent:hover{
width: 100%;
border: 1px solid;
height: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
 
.menu li{
float: left;
padding: 20px;
position: relative;
}
.menu a{
color: #fff;
}
.menu ul{
position: absolute;
padding-left: 20px;
}
.menu ul a{
color: #333;
float: none;
width: 100%;
padding: 0;
margin-left: -60px;
}
.men1u:hover ul{
position: absolute;
display: block;
width: 200px;
top: 0;
left: 0;
}
.menu ul a:hover > .menu a:hover{
color: red;
 
}

Нужно сделать так что бы при наведении на Родительский элемент, он менял цвет и вместе с ним меняли цвет его дочерние элементы, и наоборот при наведении на хотя бы 1 дочерний элемент подсвечивался родитель и его дочерние элементы, надеюсь смог внятно все описать, вот пример такого меню

@Goal · 26.09.2014, 23:59

родительскому узлу надо задать hover

CSS

1
2
3

ul:hover{
    background-color: green;
}

@ludmila-sv · 27.09.2014, 21:30

CSS

.menu li:hover ul li a{color: red;
}
.menu li:hover a{color: red;
}

а вот это уберите

CSS

1
2
3

.menu ul a:hover > .menu a:hover{
color: red;
}

CSS

.men1u:hover ul{
position: absolute;
display: block;
width: 200px;
top: 0;
left: 0;
}

тут у Вас, во-первых, опечатка men1u, а во-вторых, position: absolute; приводит к тому, что всё субменю сбивается в одну строчку. Я бы это вообще убрала.

	27.09.2014, 21:30