Otimização do CSS

Pessoal. Bom Dia!

Tenho a seguinte lista desordenada que pretendo fazer um menu drop down com ela.

Porem, gostaria de otimizar meu css.

O que eu tenho que fazer?

Esse é o HTML:

 <ul id="menu">
 <li><a href="index.php">Home</a></li>
 <li><a href="anuncie.php">Anuncie</a></li>
 <li><a href="contato.php">Contato</a></li>
 <li><a href="pesquisa.php">Comprar</a>
 <ul id="sub_menu_compra">
 <li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento">Apartamento</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=casa">Casa</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=chacara">Chácara</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=fazenda">fazenda</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=kitnet">Kitnet</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=sala">Sala</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=sobrado">Sobrado</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=sobreloja">Sobre Loja</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=terreno">Terreno</a></li>
 <li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento" class="endlist" >Outros</a></li>
 </ul>
 </li>
 <li><a href="lancamentos.php">Lançamentos</a></li>
 <li><a href="quemsomos.php">Quem Somos</a></li>
 <li><a href="servicos.php">Serviços</a></li>
 </ul>

A ideia é fazer um menu parecido com esse ai:

http://www.minhaprimeiracasa.com.br/

Outra coisa que eu não consegui(talvez seja por causa da otimização foi colocar uma imagem(Seta para baixo que muda de cor quando o linl em hover) ao lado do menu comprar.

Esse é o CSS:

body {

font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
background-image:url(img/fundo_site.jpg);
background-repeat:repeat-x;

margin: 0; /AQUI, COLOCAMOS TODAS AS MARGENS(top,button, left e right) EM 0./
}

ul#menu {

list-style-type:none;
width: 750px;;
margin: 0 auto;
}

ul#menu li {

float:left;
position:relative;
padding:3px;
}

ul#menu li a{

display:block;
padding: 8px 10px;
background-image:url(../../img/fundo_site.jpg);
background-repeat:repeat-x;
color:#44275;
display: block;

border-top-color: rgb(221, 221, 221);
border-top-width: 2px;
border-top-style: solid;

border-left-color: rgb(221, 221, 221);
border-left-width: 2px;
border-left-style: solid;

border-right-color: rgb(221, 221, 221);
border-right-width: 2px;
border-right-style: solid;

}

ul#menu li a:hover{

 background:#0066FF;
 color:#CCC
}

ul#menu li:hover ul#sub_menu_compra li{

display:block;
float:none;
}

ul#sub_menu_compra {

position:absolute;
left: -36px;
}

ul#sub_menu_compra li{

display:none;
list-style-type:none;
width: 130px;
margin: 0 auto;
padding:0px;
}

Tentei olhar no codigo fonte dessa pagina mas toda tentativa que fiz de entender seu CSS(enorme e não comentado).

A ideia é o menu igual ao site modelo.

O meu projeto pode ser acompanhado em http://www.dinamicaimoveis.com.br/novo/

Estou a 3 dias tentando entender o que foi feito naquele menu mas não consegui.[/code]