CODEWITHSUNDEEP
htmlcssdrop-down-menu
jeffkee
jeffkee

Reputation: 5238

Dropdown menu colour not restoring after hovering out of the submenu div downwards

This is an interesting one.

The CSS:

    #menu>li>a:link, #menu>li>a:visited {
        color:#002349;
        display: block;
        float: left;
        width: auto;
        font-weight: 500;
        font-size: 18px;
        text-decoration:none;
        text-transform: lowercase;
        padding: 10px 10px;
    }

    #menu>li:hover>a {
        color:#fff;
        text-decoration: none;
        background-color: #002349;
    }

.submenu {
    position:absolute;
    left: -9999px;
    padding:0px 0px 0px 0px;
    top:32px;
    margin: 0px;
    text-align: left;
    background-color: #002349;
    width: auto;
    z-index: 20;
}

#menu li:hover .submenu {
    display:block;
    position: absolute;
    left:0px;
}

.submenu li {
    text-align: left !important;
    margin:0px 0px 0px 0px !important;
    padding: 0px;
    display:block;
    clear:both;
}

.submenu li a:link, .submenu li a:visited {
    color:#fff !important;
    font-size: 12px;
    margin: 0px;
    padding:5px 12px 7px 12px !important;
    margin: 0px !important;
    display: block;
    text-transform: uppercase;
    white-space: nowrap;
}

.submenu li a:hover, .submenu li a:active {
    color:#fff !important;
    background: #666 !important;
    text-decoration: none;
}

The HTML:

<ul id="menu">
    <li><a href="http://jamie.brixwork.com/why-jamie-realtor" title="Meet Jamie MacDougall">why jamie</a>
    </li>
    <li><a href="http://jamie.brixwork.com/why-sothebys" title="Why Sotheby's International?">why sotheby's</a>
    </li>
    <li><a href="http://jamie.brixwork.com/listings" title="Featured Real Estate Listings">featured listings</a>
        <ul class="submenu">
            <li><a href="http://jamie.brixwork.com/listings/pageid-8/city-North+Vancouver/page-1" title="Featured Real Estate Listings">North Vancouver</a></li>
            <li><a href="http://jamie.brixwork.com/listings/pageid-9/city-West+Vancouver/page-1" title="Featured Real Estate Listings">West Vancouver</a></li>
        </ul>
    </li>
</ul>

You can see the whole page here: http://jamie.brixwork.com/why-sothebys

Go over the "listings" menu with your mouse. If your mouse exits UPWARDS or SIDEWAYS, the original text colour (dark blue) comes back.

However if you proceed to the dropdown menu () and then exit by moving mouse downwards out of the submenu, the text colour of the top menu doesn't change back.

Why would this be? I have the :hover on the top

  • tag because I want the hover effect to be in effect on the top menu item while the submenu is hovered so I can't put the hover effect only on the tag of the top menu.

    Upvotes: 1

    Views: 282

    • Answers (1)

    jeffkee
    jeffkee

    Reputation: 5238

    https://github.com/sorccu/cufon/wiki/FAQ#wiki-faq-10

    Turns out it was a CUFON issue where the detection is off. FAQ #10 has the answer.. although I don't even understand whatever that means. :( But copy-pasting a snippet from their example solved it.

    I changed my CUFON replacement code to:

    Cufon.replace('#menu>li', { fontFamily: 'gillsans', hover:true,
hoverables: { li: true },
    ignore: { ul: true },
    textless: { li: true }
});

    Upvotes: 1

    Related Questions