Опять напоролся на якорь

[kostyanet]

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

Вот каноничная схема списочного меню

<ul id="nav_menu" class="nav_menu">
	<li data-menu="orders">
		<a href="#">Parent 1</a>
		<ul data-event="click">
			<li><a href="#">Parent 1 &raquo; Child 1</a></li>
			<li><a href="#">Parent 1 &raquo; Child 1</a></li>
		</ul>
	</li>

Вот стили (не нашел тут спойлера, мотайте до конца)

ul.nav_menu {
	background-color:brown;
	height: 25px;
	font-size: 12px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

	.nav_menu li {
		list-style: none;
		float: left;
		border-left:1px solid rgb(230,180,180);
		line-height: 25px;
		height:25px;
		font-weight: bold;
		display:block;
		padding: 0 10px;
	}
	
	.nav_menu li:hover  {
		background: rgb(200,200,200);
		color: black;
	}
	
	/*
	* hidden list
	*/
	.nav_menu  li ul {
		display: none;
		position: absolute;
		padding: 0;
		margin-left:-10px;
		background: rgb(230,230,230);
		color:black;
	}

	.nav_menu li ul li {
		float: none;
	}

	.nav_menu li ul li a {
		text-decoration: none;
		color: black;
	}
	
	.nav_menu li a {
		text-decoration: none;
		color: white;
	}

	.nav_menu li a:hover {
		color: black;
	}

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

Ни в какую не хочет ничего наследовать этот якорь и точка. В смысле я наверно не знаю как это делается, хотя уже докопался до зашибенской страницы типа http://www.quirksmode.org/css/selectors/

В примерах на которых я пытался понять как сделано - ничего не сделано. ПРосто народ делает как получается и подгоняет под возможности свои хотелки. То есть я беру вроде годный пример, меняю цвета на свои - получаю тот же член яйца сбоку.

Маленький ява-скрипт еще обслуживает это меню, так что можно им, но опять же добираться от потомка к родителю черех дребедень текстовых нод не климант.

[kostyanet]

Если вообще якорь не трогать, он будет реликтового синего цвета. С этого все начинается. Цвет текста родителя не наследуется, торчит синий подчеркнутый как в конце 90х и все пофигу ему что уже СЫЫ3 вышел.

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

Первичную заготовку я тоже где-то стянул, от нее почти ничего не осталось. За годы я так и не врубился как устроены CSS, хотя вроде с другими языками особых проблем не возникало. По-моему CSS разработан аутами и для аутов.

[danik.js]

Ни в какую не хочет ничего наследовать этот якорь и точка

Он ничего и не будет наследовать, ибо ты ему явно указал: color:white его собственное значение цвета. Так что ему незачем че-то там наследовать, своего ведь хватает.

Чтоб наследовал пиши color: inherit, и будет наследовать.

Как альтернатива, пиши

.menu li a:hover,
.menu li:hover a{
     color: black;
}

[danik.js]

По-моему CSS разработан аутами и для аутов.

Скорее, CSS ауты и не могут освоить, вот и жалуются на него.
Не то чтобы CSS идеален, свою задачу язык выполняет прекрасно. А если принять во внимание новейшие модули - то это просто кайф.
Вобще язык очень простой. но есть конечно неочевидные моменты.

[kostyanet]

Чтоб наследовал пиши color: inherit, и будет наследовать.

Ип...ческая сила. Вроде с этого и начал, проинхерил все, потом похерил, потом ява-скрипт, потом доки читать, примеры искать и все такое.

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

В общем спасибо, проинхерил - все работает.

[kostyanet]

Попутно, посклльку быстро все скончалось. В стопицотый раз лезу копипастить из какого-нить шаблона строчки типа

<link type="text/css" rel="stylesheet" href="menu.css"/>
<script type="text/javascript" src="menu.js"></script>

Нормальный человек подумает что нормально инклюды инклюдятся по одной схеме. Но блин не в хтмл. Если не вижу как, то не могу вспомнить где href, а где src,

[danik.js]

Ну не может у линка быть источник. Линк - это ссылка (reference). А скрипт, если он не встроенный, то как и остальные ресурсы (img, iframe и тд) - имеет source.

Хотя раньше тоже задумывался, зачем было так запутывать. На мой взгляд можно было бы сделать так:

<style src="menu.css"></style>
<script src="menu.js"></script>

[kostyanet]

Я начинал с С, асса и басика и поэтому с трудом осваиваю уеб-технологии. Кто сразу с них начал - я же вижу - им гораздо проще.

[danik.js]

К слову, разрабатывалась когда-то такая штука как XHTML2.0 эххх. Не взлетело... А там так все круто придумано...
Так вот, там атрибут src можно было указать любому элементу.
Код из документации:

<style src="style.css" type="text/css" media="screen" />
<span src="photo.jpg" media="screen">Me at work</span>
<span src="photo-hires.jpg" media="print">Me at work</span>

http://www.w3.org/TR/xhtml2/mod-styl....html#sec_28.1.

[kostyanet]

Нашел формальный косяк. В родительском корневом элементе не было цвета текста. А от него наследуются и скрытые списки, и открытые, и все такое, в общем х проссышь.

Но теперь все четко работает как доктор прописал.

Про XHTML2.0 не слышал (вероятно его задавил веб-два-ноль), но однажды пришлось написать сайт полностью на xml'е, то есть xml+xslt и как говорят с тех пор у меня двойственные чуйства. С одной стороны эта технология потрясает универсальностью и фундаментальностью. С другой стороны никто не хочет ее развивать (хотя ей в обед 50 лет) и даже микрософт пугавший адобу своим каким-то Х-языком для препресса сдулся под вековой тяжестью утырного посткрипта.