Подскажите, пожалуйста, как сделать при помощи CSS, чтоб в существующем горизонтальном меню подменю открывалось не при наведении, а при клике на него курсора.
1 ответ
Пришлось поправить, теперь по клику меню фиксируется в открытом состояни, но без javascript уже не обошлось:
<head>
<style type="text/css">
.mi ul, mi1 ul{
padding: 0;
margin:0;
list-style:none;
border:0;
text-align:left;
}
.mi a, .mi a:visited, .mi1 a, .mi1 a:visited{
text-decoration:none;
display:block;
color:#048;
height:20px;
text-align:center;
background:#fff;
line-height:20px;
font-size:11px;
padding: 0 5px 0 5px;
white-space: nowrap;
text-align:left;
}
.mi ul {
padding: 0;
margin:0;
list-style:none;
border:0;
float: none;
color:#048;
display:none;
text-align:left;
}
.mi:hover ul, .mi ul:hover, .mi:hover ul:hover, .mi1 ul, .mi1 ul:hover {
display:block;
position:absolute;
top:22px;
left:-1px;
border:1px solid #048;
background:#fff;
z-index:100;
text-align:left;
}
.mi:hover ul a, .mi1 ul a{
padding: 0 5px 0 5px;
color:#048;
display:block;
float: none;
background:#fff;
text-align:left;
}
.mi:hover ul a:hover, .mi1 ul a:hover {
background:#cff;
display:block;
color:#048
text-align:left;
}
</head>
<body>
<div class="mi"><a href="#" onclick="this.parentNode.className=this.parentNode.className=='mi'?'mi1':'mi'">Продукты </a><ul>
<a href="/price/risotec_rozn.zip">Прайс-лист</a>
<a href="?mode=news_release">Последние релизы </a>
</ul></div>
</body>