Форум Сайтостроение Веб-строительство

как сделать чтоб элемент не наследовал свойств родителя?

anton831
На сайте с 25.05.2011
Offline
71
anton831
8432

Добрый день!

Вопрос по CSS.

Вобщем суть вопроса:

Создал динамическое меню, при формировании меню по запросу в SQL, ссылке соответствующей $_SERVER['REQUEST_URI'], то есть открытой в настоящий момент, присваиваеться ID=active.

Соответственно элементу с ID=active, присваиваеться свойства color:020202; и font-weight:700;.

Вобщем с этим проблем нет, все работает и активная ссылка отображается как надо.

Но вот с вложенными в нее элементами (когда они присутствуют в меню конечно) <ul><li> - проблема!

Так как элементам у которых родитель active, передаються указанные выше свойства, чего я собственно хотел бы избежать.

Что пробовал для решения проблемы:

Указывал точный путь до элементов, создал вложенным элементам свой ID=notselect, применил свойство !important.

Ничего из вышеперичисленного не помогает! Свойства color:020202; и font-weight:700;, все равно наследуются вложенными элементами!

Вот код - помогите плз!

CSS

#active ul #notselect а{

font-weight: 600 !important;

color:#650106 !important;

text-decoration: none;

}

HTML:

<ul>

<li id="active">

<a href="/news-company.html">Новости</a>

<ul>

<li id="notselect">

<a href="/news/news.html">Новости компании</a>

</li>

</ul>

</li>

</ul>

SC
На сайте с 02.05.2009
Offline
52
shareyourtrade.com
#1

Нужно указывать точный путь как: ul li ul li. Свойство !important использовать не нужно. Находите место в CSS, где прописывается li#active и пишите: ul li#active ul li {}

anton831
На сайте с 25.05.2011
Offline
71
anton831
#2
shareyourtrade.com:
Нужно указывать точный путь как: ul li ul li. Свойство !important использовать не нужно. Находите место в CSS, где прописывается li#active и пишите: ul li#active ul li {}

Сделал так, все равно наследует..

SC
На сайте с 02.05.2009
Offline
52
shareyourtrade.com
#3

Покажите CSS самого меню.

anton831
На сайте с 25.05.2011
Offline
71
anton831
#4
shareyourtrade.com:
Покажите CSS самого меню.

.mainmenu ul li{

              display: block;

	width: 230px;

              min-height:30px;

	padding-left:30px;

	position: relative;

	margin-left: 0px;

	background:url(../img/menu_li.png) no-repeat left top;

}

.mainmenu ul {

              display: block;

	position: relative;

	padding-left: 30px;

}

.mainmenu ul li a{

              font-family: cursive;

              font-size:15px;

              line-height: 28px;

              font-weight: 600;

              color:#650106;

	text-decoration: none;

}

.mainmenu ul li a:hover{

              font-family: cursive;

              font-size:15px;

              line-height: 28px;

              font-weight: 600;

              color:#fd323b;

	text-decoration: underline;

}

.mainmenu ul li ul {

	width: 230px;

 	padding-left:5px;

}

.mainmenu ul li ul li{

              display: none;

	width: 230px;

              min-height:30px;

 	padding-left:30px;

	margin-left: -15px;

	background:url(../img/menu_li.png) no-repeat left top;

}

.mainmenu ul li:hover ul li {

              display: block;



}

#active {

              display: block;

}

#active a{

              color:#020202;

              font-weight: 700;

}

#notselect {

	width: 230px;

}

 ul li#active:hover ul li#notselect а{

              font-weight: 600 !important;

              color:#650106 !important;

	text-decoration: none;

}

Я еще забыл написать, что свойство display вложенных элементов, меняется в зависимости от псевдокласса hover.

может быть с этим связанно?

anton831 добавил 19.09.2011 в 18:22

О_о, решил проблему))

сработала конструкция:

.mainmenu ul li#active:hover ul li#notselect a{

font-weight: 600;

color:#650106;

text-decoration: none;

}

О склеивании слов в Как быстро сделать кампанию Как оптимизировать загрузку шрифтов

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий