[css] doppio menù colori diversi

Salve, mi sono perso conla gestione delle classi e degli id con i css, inizialmente ho cercato di creare un menù con degli effetti con il css, ma quando ho provato ad aggiungere il codice di un menù preso da internet chiaramente, si sono mischiati i colori e il resto, ho capito che dovrai usare la sintassi col punto iniziale anzichè il cancelletto, ma non sono sicuro in quali stringhe fare la modifica, perchè cè: menu, menu ul, menu li ecc, inoltre credo che nel primo codice css ci sia qualche "sporcizia" cè qualche stringa che non mi convince, specie verso la fina, potreste darmi una mano a fare un pò di ordine?
codice del menù a sinistra:

Codice:

#menu{ width: 10em; font: 80% Arial, Helvetica, sans-serif; } #menu ul{ margin: 0; padding: 0; list-style: none; } #menu li{ font-size: 1.1em; display: inline; margin: 0; padding: 0; } #menu a:link, #menu a:visited{ display: block; background: #FFE6BF; color: #993333; margin:0.06em 0; padding: 0.3em 0.6em; text-decoration: none; } #menu a:hover, #menu a:focus, #menu a:active{ background: #FFF; color: #993333; border-color: #41545F; padding-left: 0.95em; } /*fine gestione menù*/ #menu02{ width: 10em; } #menu02 ul{ margin: 0; padding: 0; list-style: none; } #menu02 a.menu:link, #menu02 a.menu:visited{ display: block; background: #FFE6BF; color:#993333; margin:0.06em 0; padding: 0.3em 0.6em; text-decoration: none; border: 1px solid #ffffff; font: 83% Arial, Helvetica, sans-serif; } #menu02 a.menu:hover,#menu02 a.menu:focus,#menu02 a.menu:active{ background:#ffffff; }

menù da aggiungere:

Citazione:

<style type="text/css">
html{
background-color: #000000;
margin:50px 0 0 0;
padding:0;
}
body{
behavior: url(script/csshover2.htc);
}
#menu{
margin:0;
padding:0;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menu li a{
width:120px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 10px;
}
#menu li a:hover{
background-position: bottom center;
}
#menu ul ul{
position: absolute;
top: 30px;
width: 120px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
a.green{
background: url(img/green.jpg) no-repeat top center;
color: #006600;
}
a.orange{
background: url(img/orange.jpg) no-repeat top center;
color: #CC3300;
}
a.blu{
background: url(img/blu.jpg) no-repeat top center;
color: #006699;
}
a.yellow{
background: url(img/yellow.jpg) no-repeat top center;
color: #FF9900;
}
a.purple{
background: url(img/purple.jpg) no-repeat top center;
color: #990066;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#nogo" class="green">Link 1</a>
<ul>
<li><a href="#nogo" class="green">Link 1-1</a></li>
<li><a href="#nogo" class="green">Link 1-2</a></li>
<li><a href="#nogo" class="green">Link 1-3</a></li>
</ul>
</li>
<li><a href="#nogo" class="orange">Link 2</a>
<ul>
<li><a href="#nogo" class="orange">Link 2-1</a></li>
<li><a href="#nogo" class="orange">Link 2-2</a></li>
<li><a href="#nogo" class="orange">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo" class="blu">Link 3</a>
<ul>
<li><a href="#nogo" class="blu">Link 3-1</a></li>
<li><a href="#nogo" class="blu">Link 3-2</a></li>
<li><a href="#nogo" class="blu">Link 3-3</a></li>
</ul>
</li>
<li><a href="#nogo" class="yellow">Link 4</a>
<ul>
<li><a href="#nogo" class="yellow">Link 4-1</a></li>
<li><a href="#nogo" class="yellow">Link 4-2</a></li>
<li><a href="#nogo" class="yellow">Link 4-3</a></li>
</ul>
</li>
<li><a href="#nogo" class="purple">Link 5</a>
<ul>
<li><a href="#nogo" class="purple">Link 5-1</a></li>
<li><a href="#nogo" class="purple">Link 5-2</a></li>
<li><a href="#nogo" class="purple">Link 5-3</a></li>
</ul>
</li>
</ul>
</div>