1

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

2
  • > это при наведении а мне нужно при > клике)) (46 минут назад) @kiberchainik определитесь с событием!
    – Palmervan
    7 июн 2012 в 9:02
  • все исправил 7 июн 2012 в 9:26

1 ответ 1

2

Пришлось поправить, теперь по клику меню фиксируется в открытом состояни, но без 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>
4
  • это при наведении а мне нужно при клике)) 7 июн 2012 в 8:13
  • а что же в вопросе наоборот написали?
    – sercxjo
    7 июн 2012 в 8:46
  • гадство)) прошу прощения)) 7 июн 2012 в 9:24
  • Добавил реакцию на клик. В общем поэкспериментируйте с этим дальше
    – sercxjo
    7 июн 2012 в 10:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.