Почему наследуется значение от родительского блока?

Question

[Max]

Здравствуйте, подскажите пожалуйста как избежать наследования стилей в пунктах меню. Есть 3-ех ярусное меню.

<ul class="main_menu"> <!-- GLAVNOE BOLshoe menu  -->
								<li class="openSecMenu"> <!-- Pervui punkt menu -->
									<a href=""> Аксесуары</a>									
									<ul class="second_menu"> <!--Pervoe dopolnitelnoe menu-->
										<li class="openThirdMenu"><a href="">
										Для дома и интерьера <!-- Pynkt pervogo dopolnitelnogo menu-->
												<ul class="third_menu"><!--Wtoroe dopolnitelnoe menu-->
													<li><a href=""></a></li> <!--Pynktu vtorogo dopolnitelnogo menu-->
													<li><a href=""></a></li>
													<li><a href=""></a></li>
												</ul>
											</a></li>
										<li class="openThirdMenu"><a href="">
												Для дома и интерьера
												<ul class="third_menu">
													<li><a href=""></a></li>
													<li><a href=""></a></li>
													<li><a href=""></a></li>
												</ul>
											</a></li>
										<li class="openThirdMenu"><a href="">
												<ul class="third_menu">
												Для дома и интерьера
													<li><a href=""></a></li>
													<li><a href=""></a></li>
													<li><a href=""></a></li>
												</ul>
											</a></li>
									</ul>
								</li>
<ul>

Стили

.second_menu{
    display: none;
}
.third_menu{
    display: none;
}

/* Пункты главного меню при наведении */
ul.main_menu li:hover {
        background-color: #4586f3;
        border-right: 4px solid #1b5ac2;
        border-left: 2px solid #1b5ac2;
        width: 233px;
        margin-left: -1px;
        margin-top: -1px;
}
ul.main_menu li:hover a{
    color: #fff;
    text-decoration: none;
}

/* Открытие второго и тетьего меню */
li.openSecMenu:hover .second_menu{
    width: 248px;
    height: 100px;
    background-color: #fff;
    display: block;
}
li.openThirdMenu:hover .third_menu{
    width: 248px;
    height: 100px;
    background-color: #fff;
    display: block;
}
/* Выравнивание второго и третьего меню меню */
ul.second_menu {
        margin-left: 225px;
        margin-top: -24px;
}
ul.third_menu {
        margin-left: 240px;
        margin-top: -24px;
}

Как сделать так, что-бы стили второго(дочернего меню) не наследовались??

Comments

[Алексей Уколов]

Каскадные таблицы стилей не просто так имеют свое название.
Наследование нельзя отключить, его можно только перекрыть стилями элемента.

Answer 1

[Денис Инешин]

Подобная конструкция распространяется на все вложенные li:

ul.main_menu li {
}

Чтобы избежать этого, используйте такой синтаксис:

ul.main_menu > li {
}

Таки образом вы зададите стили непосредственно только тем li, что вложены в список main_menu и т.д.

Comments

[Max]

Большое спасибо!)