How to make a caret in a link change color when the LINK is hovered over?

Question

In my HTML, I created a link on my navbar that when hovered over, causes a [dropdown] menu to drop:

<a href = "#accomplishments" class = "dropdown-toggle" data-toggle = "dropdown">Dropdown<b class = "caret"></b></a>

And beside the word dropdown there's a downward-pointing caret. What I want to do is make it so that when the cursor reaches any part of "Dropdown", the caret changes color and "Dropdown" remains its default color - essentially working in the same fashion as the "More" link beside "News" when you search something on Google.

CSS:

.navbar-inverse .navbar-nav > li > a {
color: #ffffff /* text color default (sans active)*/;
}

This^^ deals with white being the default color of all the non-active links in the navbar.

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff; /* flash (sans active) */
background-color: transparent;
}

And this^^ deals with white being the color the non-active links become when hovered over - therefore they remain white. (And this applies to the "Dropdown" link also.)

What I was originally thinking was to define "Dropdown" by #link for example and then treat it separately from the other links and create some nested structure in which the .caret code would be put, but I have no idea how to pull that off - I failed miserably.

Anyway, if any of you guys could help, I'd be eternally grateful !!! Let me know if there's some other code you need to better understand what I'm going for, or already have.

I'm using Bootstrap 3.2.0 btw.

Answer 1

http://jsfiddle.net/eyjrx/

This will do the trick.

HTML:

<a href="#"><span>More</span><span class="arrow">&#6132;</span></a>

CSS:

a span {
    color:grey;
    font-family:verdana;
}
a:hover *.arrow {
    color:black;
}
a:active span, a:active *.arrow {
    color:red;
}