Как изменить код чтобы добавить запаздывание в выпадающем меню CSS?

Toker · 2013-08-17T22:38:29.0000000Z

Добрый день, Ниже представлен код выпадающего меню CSS. Как его изменить, чтобы добавить запаздывание развертывания и свертывания? Спасибо <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title> <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." /> </head> <body bgcolor="#ffffff">  <style> #pcm{display:none;} ul.pureCssMenu ul{display:none} ul.pureCssMenu li:hover>ul{display:block} ul.pureCssMenu ul{position: absolute;left:98%;top:-1px;} ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;} ul.pureCssMenu,ul.pureCssMenu ul { margin:0px; list-style:none; padding:0px 1px 1px 0px; background-color:#308321; background-repeat:repeat; border-color:; border-width:0px; border-style:solid; } ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu { display:block; zoom:1; _width:116.55000000000001px; float: left; } ul.pureCssMenu ul{ width:138.6px; } ul.pureCssMenu li{ display:block; margin:1px 0px 0px 1px; font-size:0px; } ul.pureCssMenu a:active, ul.pureCssMenu a:focus { outline-style:none; } ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover { display:block; vertical-align:middle; zoom:1; background-color:#91FF09; border-width:0px; border-color:#E4E1DE; border-style:solid; text-align:left; text-decoration:none; padding:4px; _padding-left:0; font:normal 11px Tahoma; color: #305429; text-decoration:none; cursor:default; } ul.pureCssMenu span{ overflow:hidden; } ul.pureCssMenu ul li { float:none; } ul.pureCssMenu ul a { text-align:left; white-space:nowrap; } ul.pureCssMenu li.sep{ text-align:left; padding:0px; line-height:0; } ul.pureCssMenu li.sep span{ float:none; padding-right:0; width:100%; height:3; display:inline-block; background-color:; background-image:none;} ul.pureCssMenu li:hover{ position:relative; } ul.pureCssMenu li:hover>a{ background-color:#47723F; border-color:#FFFFFF; border-style:solid; font:normal 11px Tahoma; color: #FFFFFF; text-decoration:none; } ul.pureCssMenu li a:hover{ position:relative; background-color:#47723F; border-color:#FFFFFF; border-style:solid; font:normal 11px Tahoma; color: #FFFFFF; text-decoration:none; } ul.pureCssMenu li.dis a { color: #AAAAAA !important; } ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px; height:24px; } ul.pureCssMenu ul img {width:16px; height:16px; } ul.pureCssMenu img.over{display:none} ul.pureCssMenu li.dis a:hover img.over{display:none !important} ul.pureCssMenu li.dis a:hover img.def {display:inline !important} ul.pureCssMenu li:hover > a img.def {display:none} ul.pureCssMenu li:hover > a img.over {display:inline} ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline} ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none} ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block} ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none} ul.pureCssMenu span{ display:block; background-image:url(./images/arrow_sub5.gif); background-position:right center; background-repeat: no-repeat; padding-right:12px;} ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrow_main4.gif); } ul.pureCssMenu a:hover span{ _background-image:url(./images/arrow_main4.gif)} ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)} ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arrow_main4.gif);} ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(./images/arrow_main4.gif)} ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(./images/arrow_sub5.gif)} </style>   <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">PureCSSMenu.com</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Product Info</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">What is New?</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu Features</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Free Online Generator</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">100% Pure CSS Menu</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">No Javascript Required</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Multi Level Submenus</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Search-Engine Friendly</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Advanced Styling</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Horizontal & Vertical</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>How To Use</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">1. Select Template</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">2. Customize Items</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">3. Download Zip</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Templates</span><![if gt IE 6]></a><![endif]> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 1</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 2</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 3</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 4</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 5</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 6</a></li> </ul> </li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">FAQ</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#">Contact Us</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>  </body> </html>

121

Toker

18 августа 2013, 17:18

#11

Кто-то может подсказать подходящий JavaScript конкретно для этого случая?

120

megal

18 августа 2013, 19:11

#12

http://www.xiper.net/collect/js-plugins/usability/diagonal-drop-down-menu.html

Что делать, чтобы попасть в ответы Google Bard

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Как изменить код чтобы добавить запаздывание в выпадающем меню CSS?