I've made some adjustment int he template.css so it's working now.
The lines below stopped the color from working. Once I commented out these lines, the problem went away.
There might be another couple of changes I made and I can't remember which.
I believe it's mainly due to the changed made in the template.css 1.0.6 upgrade.
#mainnav .navbar-form .nav > li .active a:after,
#mainnav .navbar-form .nav > li:hover a:after {
border-bottom-color: #e0e0e0;
}
#mainnav .navbar-form .nav > li > a,
#mainnav .navbar-form .nav > li > a:active,
#mainnav .navbar-form .nav > li > a:focus,
#mainnav .navbar-form .nav > li > a:hover,
#mainnav .navbar-form .nav > li span.separator,
#mainnav .navbar-form .nav > li span.separator:active,
#mainnav .navbar-form .nav > li span.separator:focus,
#mainnav .navbar-form .nav > li span.separator:hover {
color: #e0e0e0;
}
#mainnav .navbar-form .nav > li > a:active:after,
#mainnav .navbar-form .nav > li > a:after,
#mainnav .navbar-form .nav > li > a:focus:after,
#mainnav .navbar-form .nav > li > a:hover:after,
#mainnav .navbar-form .nav > li span.separator:active:after,
#mainnav .navbar-form .nav > li span.separator:after,
#mainnav .navbar-form .nav > li span.separator:focus:after,
#mainnav .navbar-form .nav > li span.separator:hover:after {
border-bottom-color: #e0e0e0;
}
