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.

[Brendon Bauer]

I'm not sure if you mean the extra <li> elements I had originally? Before, I put more <li> elements on there so they wrapped to the second line (which is what may end up happening in the future, and is why I was trying to solve this problem now). You can still recreate the problem by resizing the browser window down slightly, causing the menu to wrap. So I didn't set up another instance of superfish menu that I know of But thanks for your help! I've always appreciated it in the past.

[olup]

You mean adding a second row of menu items like you had in the original?

If you do that, I'd switch the dropdown and the second menu.

I came across this article yesterday on z-index:http://coding.smashingmagazine.com/2...ehensive-look/

Important thing is to position the element you want the z-index on either absolute,fixed or relative, only then will the z-index be applied.

[SrWebDeveloper]

Originally Posted by Brendon Bauer

I'm not sure if you mean the extra <li> elements I had originally? Before, I put more <li> elements on there so they wrapped to the second line (which is what may end up happening in the future, and is why I was trying to solve this problem now). You can still recreate the problem by resizing the browser window down slightly, causing the menu to wrap. So I didn't set up another instance of superfish menu that I know of But thanks for your help! I've always appreciated it in the past.

Try setting static overall width and overflow: none for the menu container (i.e. "div.sf-menu" and/or whatever container which is a parent of that) might even try the same on div.sf-menu ul (menu width, take into consideration how many across in your math)