Hi, I am rendering a Menu using Jquery.
When I click on a menuitem, the submenuitems are shown only after a delay. I want to show all the submenuitems at once I click the menuItem. How can I achieve this? Also there is another issue. Sometimes the subitems are not displayed.
I am placing the html, css style and jquery used for this.
CSS
ul.menu {list-style:none; margin:0; padding:0} ul.menu * {margin:0; padding:0} ul.menu a {display:block; color:#000; text-decoration:none} ul.menu li {position:relative; float:left; margin-right:0px} ul.menu ul {position:absolute; top:25px; left:0; background:none; display:none; list-style:none} ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:200px; margin:0} ul.menu ul li a {padding:5px 7px 7px;display:block; BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: white 1px solid; COLOR: black; BORDER-BOTTOM: white 1px solid; FONT-FAMILY: verdana, helvetica, arial; text-align:left; BACKGROUND-COLOR: white; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90);} ul.menu ul li a:hover {COLOR: black; BORDER-BOTTOM: #a3c1e0 1px solid; FONT-FAMILY: verdana, helvetica, arial;BACKGROUND-COLOR: #a2c0df; BORDER-RIGHT: #a3c1e0 1px solid; BORDER-TOP: #a3c1e0 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #a3c1e0 1px solid;} ul.menu ul ul {left:195px; top:-1px} ul.menu .menulink {padding:5px 7px 7px; FONT-SIZE: 8pt; CURSOR: hand; COLOR: white; FONT-FAMILY: verdana, helvetica, arial; BACKGROUND-COLOR: #ff0000; TEXT-DECORATION: none} ul.menu .menulink:hover, ul.menu .menuhover {FONT-SIZE: 8pt; CURSOR: hand; COLOR: blue; FONT-FAMILY: verdana, helvetica, arial; BACKGROUND-COLOR: #ff0000; TEXT-DECORATION: none} ul.menu .sub {display:block; BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: white 1px solid; COLOR: black; BORDER-BOTTOM: white 1px solid; FONT-FAMILY: verdana, helvetica, arial;BACKGROUND-COLOR: white; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90);background:#ffffff url(../images/arrow.gif) 190px 8px no-repeat} ul.menu .topline {border-top:1px solid #aaa}
Javascript
var menu=function(){ var t=15,z=50,s=6,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0; for(i;i=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearInterval(c.t); return } var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }();