Opacity of a dropdown menu

[Brendon Bauer]

Hello,

Been awhile since I've been here but I've got a little problem I can't solve. I've been modifying a new theme for a website (credit to Super Skeleton by Brandon Jones) but am having a problem where the dropdown menu is transparent and you can see the menu below it, making things unreadable.

To see my problem, you can go to this test page: http://www.summitnorthwest.org/responsive/test.php

I added several menu items on the second row in order to make the problem more obvious. When you hover over a menu item in the top row, it is transparent (making it hard to read) and when you move your mouse down, the menu interferes with the one below it. Any ideas on how to fix this? I was thinking of maybe implementing some sort of z-index? As far as the transparency goes, at one point I changed all the options I could find to 1, but none of them seemed to have any affect (I have since changed them back to their original values).

CSS for the menu stuff is located at (sf-menu class): http://www.summitnorthwest.org/respo...ets/styles.css

Thanks for the help! You guys are awesome on here
Brendon

[olup]

Try to set the z-index really high to something like 9999 and it should work

.sf-menu ul li {
        float:left;
        white-space:normal;
        width:100%;
        z-index:9999;

[Brendon Bauer]

Tried applying a really high z-index but no luck :\

[SrWebDeveloper]

In styles.css line 364 I found this upon introspection:

.sf-menu > li > a {
padding: 10px 10px 15px;
background: transparent;
margin-bottom: 0;
}

Comment out the "background: transparent" or change to "background: #fff" to see if that fixes things. Your site uses the Superfish menu system which adds inline styling in addition to using its own stylesheet, so if the above advice doesn't help I suggest considering not setting the menu block to use their styling and use your own, created from scratch following this tutorial: http://www.themebrain.com/guide/how-...superfish-menu

[Brendon Bauer]

Thanks guys. I tried all of the above but to no avail. I started to restyle it from scratch, but then I just started adding "z-index: 999;" to every single thing in the superfish.css style sheet to see if anything would work. Low and behold, this is what did it (for those that use this default style):

.sf-menu li li li {
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	color:#676767;
	outline:		0;
	z-index:		999;
}

[SrWebDeveloper]

Originally Posted by Brendon Bauer

Thanks guys. I tried all of the above but to no avail.

Good to hear (adding the anchor states was the key), but I noticed now on your test page you also removed the second row of Superfish nav underneath the top level -- which affected the advice given, no doubt. Multiple Superfish instances on the same page sharing the same containers is a common issue and might have contributed as well, but all that matters is it's fixed. Great job and the page is coming along nicely.