Css Меню

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем sxacher, 3 окт 2014.

  1. sxacher

    sxacher New Member

    Регистрация:
    3 окт 2014
    Сообщения:
    1
    Симпатии:
    0
    Подскажите пожалуйста как сделать чтобы это меню выпадало не при наведении а при клике:

    #wb_CssMenu14
    {
    border: 0px #898900 solid;
    background-color: transparent;
    }
    #wb_CssMenu14 ul
    {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #wb_CssMenu14 li
    {
    float: left;
    margin: 0;
    padding: 0px 3px 0px 0px;
    width: 188px;
    }
    #wb_CssMenu14 a
    {
    display: block;
    float: left;
    color: #FFFFA0;
    border: 0px #FFFFA0 solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #898900;
    background-image: url(images/1.png);
    background-repeat: repeat;
    background-position: center top;
    font-family: Arial;
    font-size: 17px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    width: 178px;
    height: 28px;
    padding: 0px 5px 0px 5px;
    vertical-align: middle;
    line-height: 28px;
    text-align: center;
    -moz-box-shadow: 3px -3px 3px #000000;
    -webkit-box-shadow: 3px -3px 3px #000000;
    box-shadow: 3px -3px 3px #000000;
    }
    #wb_CssMenu14 li:hover a, #wb_CssMenu14 a:hover
    {
    color: #003300;
    background-color: #E0E000;
    background-image: url(images/4.png);
    background-repeat: repeat;
    background-position: center bottom;
    border: 0px #E0E000 solid;
    }
    #wb_CssMenu14 li.firstmain
    {
    padding-left: 0px;
    }
    #wb_CssMenu14 li.lastmain
    {
    padding-right: 0px;
    }
    #wb_CssMenu14 li:hover, #wb_CssMenu14 li a:hover
    {
    position: relative;
    }
    #wb_CssMenu14 a.withsubmenu
    {
    padding: 0 5px 0 5px;
    width: 178px;
    background-image: url(images/1.png);
    background-repeat: repeat;
    background-position: center top;
    }
    #wb_CssMenu14 li:hover a.withsubmenu, #wb_CssMenu14 a.withsubmenu:hover
    {
    background-image: url(images/4.png);
    background-repeat: repeat;
    background-position: center bottom;
    }
    #wb_CssMenu14 ul ul
    {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 192px;
    height: auto;
    border: none;
    background-color: transparent;
    }
    #wb_CssMenu14 ul :hover ul
    {
    left: -2px;
    top: 28px;
    padding-top: 0px;
    }
    #wb_CssMenu14 .firstmain:hover ul
    {
    left: -2px;
    }
    #wb_CssMenu14 li li
    {
    width: 188px;
    padding: 0 2px 2px 2px;
    border: 0px #898900 solid;
    border-width: 0 0px;
    }
    #wb_CssMenu14 li li.firstitem
    {
    border-top: 0px #898900 solid;
    }
    #wb_CssMenu14 li li.lastitem
    {
    border-bottom: 0px #898900 solid;
    }
    #wb_CssMenu14 ul ul a, #wb_CssMenu14 ul :hover ul a
    {
    float: none;
    margin: 0;
    width: 174px;
    height: auto;
    white-space: normal;
    padding: 4px 5px 3px 5px;
    background-color: #898900;
    background-image: url(images/1.png);
    background-repeat: repeat;
    background-position: center top;
    border: 2px #000000 solid;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #FFFFA0;
    font-family: Arial;
    font-size: 17px;
    font-weight: bold;
    font-style: normal;
    line-height: 17px;
    text-align: center;
    text-decoration: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    #wb_CssMenu14 ul :hover ul .firstitem a
    {
    margin-top: 2px;
    }
    #wb_CssMenu14 ul ul :hover a, #wb_CssMenu14 ul ul a:hover, #wb_CssMenu14 ul ul :hover ul :hover a, #wb_CssMenu14 ul ul :hover ul a:hover
    {
    background-color: #E0E000;
    background-image: url(images/4.png);
    background-repeat: repeat;
    background-position: center bottom;
    border: 2px #000000 solid;
    color: #003300;
    }
    #wb_CssMenu14 br
    {
    clear: both;
    font-size: 1px;
    height: 0;
    line-height: 0;
    }
    <div id="wb_CssMenu14" style="position:absolute;left:264px;top:233px;width:191px;height:28px;z-index:24;">
    <ul>
    <li class="firstmain"><a class="withsubmenu" href="#" target="_self">Пластинчатыегрибы</a>

    <ul>
    <li class="firstitem"><a href="#" target="_self">Январь-ноябрь</a>
    </li>
    <li><a href="#" target="_self">Апрель-июль</a>
    </li>
    <li><a href="#" target="_self">Май-июнь</a>
    </li>
    <li><a href="#" target="_self">Май-сентябрь</a>
    </li>
    <li><a href="#" target="_self">Май-октябрь</a>
    </li>
    <li><a href="#" target="_self">Май-ноябрь</a>
    </li>
    <li><a href="#" target="_self">Июнь-сентябрь</a>
    </li>
    <li><a href="#" target="_self">Июнь-октыбрь</a>
    </li>
    <li><a href="#" target="_self">Июнь-ноябрь</a>
    </li>
    <li><a href="#" target="_self">Июль-сентябрь</a>
    </li>
    <li><a href="#" target="_self">Июль-октябрь</a>
    </li>
    <li><a href="#" target="_self">Июль-ноябрь</a>
    </li>
    <li><a href="#" target="_self">Август-сентябрь</a>
    </li>
    <li><a href="#" target="_self">Август-октябрь</a>
    </li>
    <li><a href="#" target="_self">Август-ноябрь</a>
    </li>
    <li><a href="#" target="_self">Сентябрь-апрель</a>
    </li>
    <li><a href="#" target="_self">Сентярь-октябрь</a>
    </li>
    <li><a href="#" target="_self">Сентябрь-ноябрь</a>
    </li>
    <li class="lastitem"><a href="#" target="_self">Ноябрь-февраль</a>
    </li>
    </ul>
    </li>
    </ul>
    <br>
    </div>
     
  2. Mistral

    Mistral New Member

    Регистрация:
    14 окт 2014
    Сообщения:
    4
    Симпатии:
    0
    Сам писал или списал?
     
  3. Streletz

    Streletz Active Member

    Регистрация:
    6 сен 2014
    Сообщения:
    40
    Симпатии:
    4
  4. Mistral

    Mistral New Member

    Регистрация:
    14 окт 2014
    Сообщения:
    4
    Симпатии:
    0
    ":hover" отвечает за то,что бы при наведении мышки выпадало меню.
     
  5. -master-

    -master- Well-Known Member

    Регистрация:
    14 янв 2012
    Сообщения:
    629
    Симпатии:
    18
    это вы не подумали
     
  6. Mistral

    Mistral New Member

    Регистрация:
    14 окт 2014
    Сообщения:
    4
    Симпатии:
    0
    не понял?

    http://htmlbook.ru/css/hover
     
  7. -master-

    -master- Well-Known Member

    Регистрация:
    14 янв 2012
    Сообщения:
    629
    Симпатии:
    18
    какое отношение ваш ответ имеет к ссылке от Streletz ?
     
Загрузка...
Похожие Темы - Css Меню
  1. susinmn
    Ответов:
    6
    Просмотров:
    713
  2. lmike
    Ответов:
    10
    Просмотров:
    1.050
  3. Snusmumrik
    Ответов:
    0
    Просмотров:
    656
  4. RzvCH
    Ответов:
    0
    Просмотров:
    462
  5. AlexBeginner
    Ответов:
    1
    Просмотров:
    913

Поделиться этой страницей