使“jsddm”菜单列出子菜单

你可以帮我制作这个jquery / css / menu还能显示第二级吗？

这是代码：

HTML

 
JavaScript 
 
Drop Down Menu
 
jQuery Plugin
 
Ajax Navigation
 
 
 
Effect 
 
Slide Effect
 
Fade Effect
 
Opacity Mode
 
Drop Shadow
 
Semitransparent
 
 
 
Navigation
 
HTML/CSS
 
Help
  

CSS

 #jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #1A4473} #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white} #jsddm li ul li { float: none; display: inline} #jsddm li ul li a { width: auto; background: #9F1B1B} #jsddm li ul li a:hover { background: #7F1616} 

JQUERY

  var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; 

我如何插入一个更多级菜单并使其工作？，我已经被困在这里几天。

谢谢！

Answer 1

如何根本不使用jQuery并只使用CSS作为菜单？

http://jsfiddle.net/Sjhab/

 
 
JavaScript 
 
Drop Down Menu
 
jQuery Plugin
 
Ajax Navigation 
 
AJAXIFY
 
 
 
 
 
Effect 
 
Slide Effect
 
Fade Effect
 
Opacity Mode
 
Drop Shadow
 
Semitransparent
 
 
 
Navigation
 
HTML/CSS
 
Help
 
 #jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #1A4473} #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; opacity: 0; } #jsddm > li:hover ul, #jsddm > li:hover ul li:hover ul { visibility: visible; opacity: 1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #jsddm ul { -webkit-transition: all .5s ease-out .5s; -moz-transition: all .5s ease-out .5s; -ms-transition: all .5s ease-out .5s; -o-transition: all 5s ease-out.5s; transition: all .5s ease-out.5s; } #jsddm > li:hover ul li ul { visibility: hidden; } #jsddm li ul li { float: none; display: inline; position: relative; } #jsddm li ul li a { width: auto; background: #9F1B1B} #jsddm li ul li a:hover { background: #7F1616}