Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Opacity of a dropdown menu

B

Brendon Bauer

macrumors 6502
Original poster
May 14, 2007
344
0
Good 'ol USofA
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: (page no longer exists)

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): (page no longer exists)

Thanks for the help! You guys are awesome on here :)
Brendon
 
Last edited:
O

olup

Cancelled
Oct 11, 2011
383
40
Try to set the z-index really high to something like 9999 and it should work

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

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
In styles.css line 364 I found this upon introspection:

Code: 
.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-create-new-styles-superfish-menu
 
B

Brendon Bauer

macrumors 6502
Original poster
May 14, 2007
344
0
Good 'ol USofA
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):

Code: 
.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

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Brendon Bauer said:
Thanks guys. I tried all of the above but to no avail.
Click to expand...

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.
 
B

Brendon Bauer

macrumors 6502
Original poster
May 14, 2007
344
0
Good 'ol USofA
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 :D But thanks for your help! I've always appreciated it in the past.
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Brendon Bauer said:
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 :D But thanks for your help! I've always appreciated it in the past.
Click to expand...

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)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom