hello all!
im having trouble building the right menu i need, its a jquery lavalamp, with 3 level dropdown submenus,
ive found a lot of open source code out there but none really matched my needs, ive started modifying some of them but i always run into some problems.
im getting very close using the code found here http://premiumcoding.com/jquery-dropdown-lavalamp-menu/
ive improved it if anyone is interested in using my version.
ive fixed the anoying queuing of dropdowns,
ive added a second "lavalight" which is a png hover above the menu,
ive fixed the css to display submenus when javascript is disabled,
i added a animated color change to link texts.
BUT IM STUCK!!
i cant figure out why the damn dropdown goes down with the screen when u scroll down, im sure its in the css.
can anyone help?
here is my CSS:
/*settings for whole menu*/ .menu{ padding:0 0 10px 0; } .nav { height:40px; background-image:url(../images/backgroundMiddle.png); padding:0px 0px 0px 0px; margin-left:35%; margin-top:-30px; float:right; } .nav #navLeft{ width:4px; height:40px; background-image:url(../images/backgroundLeft.png); margin-left:-4px; float:left; } .nav #navRight{ width:4px; height:40px; background-image:url(../images/backgroundRight.png); margin-top:0px; margin-right:-4px; float:right; } .nav ul { cursor:pointer; position:fixed; list-style: none; font-size: 12px; margin-top:8px; margin-left:40px; } .nav ul ul{ z-index:100; margin-left:160px; margin-top:-21px; } /*settings for upper menu main links */ .nav a { cursor:pointer; text-decoration: none; font-family: 'Lucida Sans Unicode', Verdana, sans-serif; } /*settings for upper menu main links*/ .nav li { cursor:pointer; height:40x; padding-bottom:0px; position:relative; float: left; list-style:none; position:relative; z-index:3; margin-top:12px; } /*settings for links of main menu*/ .nav li a { height:40x; position:relative; z-index:30; padding:0px 15px 0px; cursor:pointer; font-size:12px; display:inline; color:#fff; text-transform: uppercase; padding-top:10px; cursor: pointer; } /*settings for submenus*/ .nav li li { border-bottom:thin dotted #454545; cursor:pointer; width: 140px; min-height:23px; height:23px; display:none; font-size: 12px; padding-top:4px; background-color: #1E1E20; margin: 0px -40px; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; color:#fff; position:relative; } .nav li li a{ text-transform: capitalize; text-decoration: none; color:#fff; } .nav li li li{ color: #DC3522; background-color: #2A2B2C; margin-left:-20px } .nav li li li li{ color: #fff; background-color: #000; } /* settings for submenu links on rollover*/ .nav ul, li li{ width: 0px; } /*settings for submenu links*/ /*settings for lava lamp sliding effect*/ .nav #box { position:absolute; left:0; top:0px; z-index:1; background:url(../images/hoverRight.png) no-repeat right; height:25px; padding-right:5px; margin-left:0px; } .nav #box .head { background:url(../images/hoverMain.png); height:25px; padding-left:0px; } .nav #box .clight { height:89px; padding:15px; margin:-15px; margin-top:-100px; } .nav #box2 { position:absolute; left:0; top:0px; z-index:1; height:25px; padding-right:5px; margin-left:0px; } .nav #box2 .head { height:25px; padding-left:0px; } .nav #box2 .clight { background:url(../images/c-light.png) no-repeat; height:89px; padding:15px; margin:-15px; margin-top:-100px; } .nav li li.alt{ background-color:#333; } ul.nav li a span { background:url(../images/triangle.png) 100% 1px no-repeat; margin-top:7px; position:absolute; top:2px; margin-left:0px; left:0; height:100%; width:100%; } ul.nav li li.submenu2 span { background:url(../images/triangle_sub.png) 0% 35% no-repeat; } .submenu { background:url(../images/triangle_small.png) 100% 0px no-repeat; } .submenu:hover { } .nav li li.submenu2{ background:url(../images/triangle_sub_small.png) 98% 50% no-repeat; background-color:#1E1E20; } .nav li li.submenu2:hover, .nav li li.submenu3:hover{ background:url(../images/triangle_sub.png) 98% 50% no-repeat; background-color:#999999; border-bottom:thin dotted #999999; } .nav li li li.submenu3{ background:url(../images/triangle_sub_small.png) 98% 50% no-repeat; } .nav li li:hover, .nav li li li:hover{ background-color:#999999; border-bottom:thin dotted #999999; } .nav li li.submenu2 li{ background-color:#1E1E20; } .nav li li.submenu2 li:hover{ background-color:#999999; border-bottom:thin dotted #999999; } .submenu li:hover a{/*color of font of hover effect on first submenu*/ color:#fff; } .submenu li:hover li a, .submenu li:hover li:hover li a, .submenu li li a{/*color of font for submenu level 2 and 3*/ color:#ffffff; } .submenu li:hover li:hover a{/*color of font for hover on submenu level 1*/ color:#fff; } .submenu li:hover li:hover li:hover a{/*color of font for hover on submenu level 2*/ color:#fff; } .titleMenu2{ text-align:center; } .linkText{ text-align:center; }
got it
i keep posting help and answering my own questions, well i guess it good for anyone else having the same problems,
the issue here was the position:fixed;
on the nav ul.
solved it by changing it to absolute, top 0 and left 0, and the the sub ul, relative.
go check out the homepage. if you want my mods let me know.
great work for you. keep in
great work for you. keep in touch.