Change background color of dropdown menu on hover

3 Views

I’m trying to change the submenu background color of a menu in its hover state. I’ve tried using firebug to find the relevant css classes but have only been partially successful.

If you visit the site (http://www.yogaacademy.com.au/new/) you’ll see that there is both a grey and black background on hover. I want it to be completely black.

Read More

It’s a wordpress site using the woothemes canvas theme with some customizations. The html (below) is pretty standard, but the I haven’t been able to figure out exactly where the relevant css is coming from: styles.css and css/ and custom.css in the canvas-child theme.

Your help will be much appreciated.

Thanks.

Post Views: 3

Related posts

Leave a Reply

6 comments

  3. Change:

    #navigation ul.nav ul {
background: #e6e6e6;
}

    to

    #navigation ul.nav ul {
background: #000000;
}

    I think this CSS line is coming from: wp-content/themes/canvas/css/layout.css on line 211

    Cheers

  6. HTML

    <div class="collapse navbar-collapse" id="myNav">
    <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li class="dropdown">
            <a  class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="Finan.php">Financial</a></li>
                <li><a href="Real.php">Real Estate</a></li>
            </ul>
        </li>
    </ul>
</div>

    CSS

    #myNav ul.nav ul li a:hover{
    background: #000000;
}