|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
03.10.2014, 18:44 | #1 |
Новичок
Джуниор
Регистрация: 03.10.2014
Сообщений: 1
|
Выпадающее css меню по клику
Подскажите пожалуйста как сделать чтобы это меню выпадало не при наведении, а при клике:
#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> |
03.10.2014, 21:36 | #2 |
Новичок
Джуниор
Регистрация: 03.10.2014
Сообщений: 6
|
юзай jQuery, на CSS такое мб и реализуемо, но по мне дак проще написать строчку на jQuery, чем 50 на CSS
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Вертикальное выпадающее меню при помощи CSS | Monkeycoder | HTML и CSS | 0 | 15.06.2014 17:33 |
Выпадающее горизонтальное меню только на CSS | RelaX Inc. | HTML и CSS | 26 | 10.07.2012 12:44 |
Выпадающее меню CSS+HTML | Mat-eria | HTML и CSS | 0 | 17.11.2011 17:29 |
Выпадающее горизонтальное меню на css | st_sasha | HTML и CSS | 1 | 20.10.2011 16:26 |