Need help with jQuery Multi Level CSS Menu #2 tweaks

[nivek516]

1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem: I am trying to configure the menu so the dropdowns have a 70% Black Opacity and the top-level menu buttons have a non-transparent background-image that repeats x. Is there a way to configure this to work that way with CSS? Thanks for your help in advance!

[ddadmin]

Well, regarding the background part, try first giving the top level menu links (A element) the desired background image in your CSS:

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: url(test.gif) top left repeat-x;
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

Then further down the CSS, for the sub menu links (A element again), overwrite that for those links:

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
background: #414141;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

[nivek516]

Thanks! That was easy! Now, the only problem is that I have set the following transparency:

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Arial;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0px;
border-bottom: 1px;
border-bottom-color: #13365C;
background: #000000;
filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

The transparency works great with the dropdowns except that the text becomes transparent too. Is there a way to avoid this? I want the text color white (#FFFFFF)

[ddadmin]

That's the tricky part actually with giving the sub menus a transparency filter- it affects the foreground text as well. The way around it is to add another layer on top of all the sub menus, with the background layer carrying the opacity, and the foreground layer not. As you can imagine, that's a rather tricky/ complicated process as well.

Why not just give the sub menus a background image as well, one that is semi transparent to begin with, using Photoshop for example?

[nivek516]

Yes, I thought the background image would be the best way to do it. The only problem is that the semi-transparency of the .png image won't show. It will show if I add it as a regular image on an html page, but won't on the menu. I was wondering how to work around that. I see that as the best option...as long as it works!

Thanks for your help!