kostyanet
17.02.2014, 20:56
Изредка возникает такая проблема, я ее как-то решаю и напрочь забываю как, скорее всего потому что обхожу.
Вот каноничная схема списочного меню
<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 » Child 1</a></li>
<li><a href="#">Parent 1 » 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/
В примерах на которых я пытался понять как сделано - ничего не сделано. ПРосто народ делает как получается и подгоняет под возможности свои хотелки. То есть я беру вроде годный пример, меняю цвета на свои - получаю тот же член яйца сбоку.
Маленький ява-скрипт еще обслуживает это меню, так что можно им, но опять же добираться от потомка к родителю черех дребедень текстовых нод не климант.
Вот каноничная схема списочного меню
<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 » Child 1</a></li>
<li><a href="#">Parent 1 » 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/
В примерах на которых я пытался понять как сделано - ничего не сделано. ПРосто народ делает как получается и подгоняет под возможности свои хотелки. То есть я беру вроде годный пример, меняю цвета на свои - получаю тот же член яйца сбоку.
Маленький ява-скрипт еще обслуживает это меню, так что можно им, но опять же добираться от потомка к родителю черех дребедень текстовых нод не климант.