Hogyan tudom megoldani, hogy ebben a legördülő menüben a főmenük sima állapotban feketével látszódjanak?

Amikor az egeret a főmenü vagy almenü fölé viszem, akkor remekül műxik, azonban normál állapotban is fehér a betű és azt feketére szeretném átállítani.

Szóval original állapotban #2b2b2c színűek legyenek a betűk, rollover állapotban #2b2b2c alapon fehérek.

HTML:

<div id="munkak">

<ul id="menu" class="clear">

<li><a href="#">Látványtervek</a>

<ul>

<li><a href="#">Építészet</a></li>

<li><a href="#">Lakóingatlanok</a></li>

<li><a href="#">Üzletberendezések,<br /> irodák</a></li>

<li><a href="#">Enteriőr</a></li>

<li><a href="#">Étterem, kávézó</a></li>

<li><a href="#">Rekonstrukció</a></li>

<li><a href="#">Tárgymodell</a></li>

<li><a href="#">Szalonok</a></li>

<li><a href="#">Wellness</a></li>

</ul>

</li>

<li><a href="#">Animációk</a>

<ul>

<li><a href="#">1lakás3terv</a></li>

<li><a href="#">Rezidencia</a></li>

</ul>

</li>

<li><a href="#">Álomfürdő</a></li>

<li><a href="#">2D grafikák</a></li>

</ul>

<div style="clear:both"></div>

</div> <!--munkák vége-->

CSS:

.clear {

height: 100%;

}

.clear:after {

content: '';

display: block;

clear: both;

}

#menu {

list-style: none;

padding: 0;

}

#menu ul {

list-style: none;

padding: 0;

}

#menu li {

position: relative;

float: left;

white-space: nowrap;

color: #2b2b2c;

}

#menu li a {

display: block;

padding: 5px 10px;

text-decoration: none;

color: #fff;

font-family: Arial, Helvetica, sans-serif;

text-transform: uppercase;

font-size: 15px;

}

#menu ul {

display: none;

position: absolute;

}

#menu ul li {

background: #2b2b2c;

float: none;

color: #FFF;

}

#menu ul ul {

top: -1px;

left: 100%;

}

#menu li.has_child {

padding-right: 10px;

}

#menu li.hover{

background-color: #2b2b2c;

color: #FFF;

}

JS:

<script type="text/javascript">

$(document).ready(function() {

$('#menu').menu();

});

var ie = $.browser.msie && $.browser.version < 8.0;

$.fn.menu = function() {

$(this).find('li').each(function() {

if ($(this).find('> ul').size() > 0) {

$(this).addClass('has_child');

}

});

var closeTimer = null;

var menuItem = null;

function cancelTimer() {

if (closeTimer) {

window.clearTimeout(closeTimer);

closeTimer = null;

}

}

function close() {

$(menuItem).find('> ul ul').hide();

ie ? $(menuItem).find('> ul').fadeOut() : $(menuItem).find('> ul').slideUp(250);

menuItem = null;

}

$(this).find('li').hover(function() {

cancelTimer();

var parent = false;

$(this).parents('li').each(function() {

if (this == menuItem) parent = true;

});

if (menuItem != this && !parent) close();

$(this).addClass('hover');

ie ? $(this).find('> ul').fadeIn() : $(this).find('> ul').slideDown(250);

}, function() {

$(this).removeClass('hover');

menuItem = this;

cancelTimer();

closeTimer = window.setTimeout(close, 500);

});

if (ie) {

$(this).find('ul a').css('display', 'inline-block');

$(this).find('ul ul').css('top', '0');

}

}

</script>

Illetve jquery-t innen lehet letölteni, ami működteti az egészet: http://www.victorcisneiros.com/blog/2010/12/11/creating-a-multi-level-dropdown-menu-using-css-and-jquery/

Köszi a segítséget