Question

So I have a menu with a drop down like this:

http://slypaste.org/KmsRuS4k

Sorry for the links, I just never have luck with stackoverflow html system..

So the drop down menu has the same style as the buttons which look ugly on drop downs.
I’ve tried adding a class to its li style and it still ignroed it

this is what makes the hover colors & bg of the drop down:

http://slypaste.org/5Kxv43WS

I’ve tried everything I know but still doesn’t work.

Aim:

Make the menu drop down color and links look completely different from the other menus.

Live demo:

http://justxp.plutohost.net/testing/index.html

as you see, basically it takes the border from the menu class.

Thanks.

Answer 1

You can do it like jzacharia suggested in the comments above:

CSS

In your CSS file, change this:

.menu a
{
    ....
}

.menu a:hover
{
    ....
}

to this:

.menu a.title
{
    ....
}

.menu a.title:hover
{
    ....
}

HTML

And your HTML should then look something like this:

<ul class="menu">
    <li class="current"><span style="color:#bde2e1;">Home</li>
    <li class="dropdown">
        <a id="drop4" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle title">Dropdown <b class="caret"></b></a>
        <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
            <li><a tabindex="-1" href="#">Action</a></li>
            <li><a tabindex="-1" href="#">Another action</a></li>
            <li><a tabindex="-1" href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </li>
    <li class="hovering"><a href="#" class="title">Portfolio</a></li>
    <li class="hovering"><a href="#" class="title">Releases</a></li>
    <li class="hovering"><a href="#" class="title">Contact</a></li>
</ul>