Navigation Menu Opacity

  • Resolved kumquat_s

    (@kumquat_s)


    13 years, 12 months ago

    I am trying set my navigation menu’s opacity as I want it to go in front of my header image.

    So to do this I edited the style.css to this:

    #access {
    background: #000;
    display: block;
    float: left;
    margin-top: -10px;
    margin-left: 20px;
    opacity: 0.7;
    width: 981px;
    height: 30px;
    }

    No problems the menu shows just as I want it. Now I want to make it that when I hover over an item that it turns green and the opacity no longer there (or at 1.0). So I enter this:

    #access li:hover > a,
    #access ul ul :hover > a {
    opacity: 1.0;
    background: #18850d;
    color: #fff;
    }

    But for some reason the opacity remains at 0.7. Any ideas where I am going wrong?

Viewing 3 replies - 1 through 3 (of 3 total)

  • CSS opacity doesn’t work well cross-browser.

    Thread Starter kumquat_s

    (@kumquat_s)

    In light of that I have changed by approach.

    Added a semi-opaque strip to the header image to act as the menu and made the menu clear in CSS. Works wonders. ??

    Glad to hear you got it sorted. Sometimes, you just have to go with the lowest common denominator that works. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Navigation Menu Opacity’ is closed to new replies.