Opacity of a dropdown menu

Discussion in 'Web Design and Development' started by Brendon Bauer, Dec 28, 2012.

  1. Brendon Bauer, Dec 28, 2012
    Last edited: Aug 23, 2013

    macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #1
    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
     
  2. macrumors 6502

    Joined:
    Oct 11, 2011
    #2
    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;
    
    
    
     
  3. thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #3
    Tried applying a really high z-index but no luck :\
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    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
     
  5. thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #5
    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;
    }
     
  6. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    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.
     
  7. thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #7
    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.
     
  8. macrumors 6502

    Joined:
    Oct 11, 2011
    #8
  9. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    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)
     

Share This Page