Would you be open to trying a JavaScript solution? You can modify the class on hover to change the color of the triangle.
Check out this demo: http://jsfiddle.net/lotusgodkk/buLy7/1/
$(document).ready(function () {
$('.submenu li a').on('mouseover', function () {
$(this).parents('.submenu:first').addClass('temp');
});
$('.submenu li a').on('mouseleave', function () {
$(this).parents('.submenu:first').removeClass('temp');
});
});
I've used the class temp to handle the color changes.
CSS:
#nav .submenu.temp:before {
border-bottom: 22px solid red;/*Your color*/
}
In case there are multiple submenus:
JS:
$(document).ready(function () {
$('.a').on('mouseover', function () {
console.log('in');
$(this).parents('.submenu:first').addClass('temp');
});
$('.a').on('mouseleave', function () {
$('.temp').removeClass('temp');
});
});
HTML:
<div id="nav">
<ul>
<li><a href="#">Main</a>
<ul class="submenu">
<li><a class="a" href="#">Sub 1</a>
</li>
<li><a href="#">Sub 2</a>
</li>
<li><a href="#">Sub 3</a>
</li>
<li><a href="#">Sub 4</a>
</li>
</ul>
</li>
<li><a href="#">Main</a>
<ul class="submenu">
<li><a class="a" href="#">Sub 1</a>
</li>
<li><a href="#">Sub 2</a>
</li>
<li><a href="#">Sub 3</a>
</li>
<li><a href="#">Sub 4</a>
</li>
</ul>
</li>
</ul>
</div>
Changes made:: Added a class to the first anchor in .submenu and then attached events to it.