Menu drop down

No html:

<div class= "menu">
<li><a href= "#">Home</a>
<ul>
<li><a href= "#">Exemplo1</a></li>
<li><a href= "#">Exemplo2</a></li>
<li><a href= "#">Exemplo3</a></li>
<li><a href= "#">Exemplo4</a></li>
<li><a href= "#">Exemplo5</a></li>
</ul>
<li>
<li><a href="#">Sobre</a>
<ul>
<li><a href="#">Sobre o site</a></li>
<li><a href="#">Sobre o autor</a></li>
</ul>
<li> <li><a href="#">Serviços</a>
<ul>
<li><a href="#">Exemplo1</a></li>
<li><a href="#">Exemplo2</a></li>
<li><a href="#">Exemplo3</a></li>
<li><a href="#">Exemplo4</a></li>
<li><a href="#">Exemplo5</a></li>
</ul>
<li>
<li><a href="#">História das linguagens</a>
<ul>
<li><a href="#">Exemplo1</a></li>
<li><a href="#">Exemplo2</a></li>
<li><a href="#">Exemplo3</a></li>
<li><a href="#">Exemplo4</a></li>
<li><a href="#">Exemplo5</a></li>
</ul>
<li>
<li><a href="#">Linguagens Web</a>
<ul>
<li><a href="#">Exemplo1</a></li>
<li><a href="#">Exemplo2</a></li>
<li><a href="#">Exemplo3</a></li>
<li><a href="#">Exemplo4</a></li>
<li><a href="#">Exemplo5</a></li>
</ul>
<li>
<li><a href="#">Contato</a>
<ul>
<li><a href="#">Exemplo1</a></li>
<li><a href="#">Exemplo2</a></li>
<li><a href="#">Exemplo3</a></li>
<li><a href="#">Exemplo4</a></li>
<li><a href="#">Exemplo5</a></li>
</ul>
<li>
</div>

Na folha de estilos ficaria assim:

.menu {
list-style-type:none;
margin:20px 0 0 40px;/*estica e encolhe a barra de menus afastando para a direita,
reduzindo na horizontal e aumentando na vertical*/
border:1px solid #990000;/*vermelho escuro*/
float:left;
}
.menu li {
position: relative;
float:left;
border-right:1px solid #FF0000;
padding-left:20px;/*aumenta o espaço entre a palavra e a borda do menu*/
padding-right:20px;/*aqui tem que ser igual, para que a palavra fique centralizada*/
/*background-color: #FFD700; /*Fundo do menu que aparece*/
height:28px;
line-height:28px;/*aumentando o número de pixels aumenta o espaço entre as palavras home, sobre, serviços e a parte inferior da div*/
background-image: url(img/fundo_1.gif);
} #menu a:hover {
border: 1px solid #000000;
/*background-color:#FFFF99;*/
background-image: url(img/button.jpg );
/*color:#000000; */
}
.menu li a {
font-family:Tahoma;
font-size:13px;
color:#A0522D; /*cor da fonte do menu*/
text-decoration:none;
}
.menu li ul {
position:absolute;
top:18px;/*diminui o espaço entre o topo do menu e do submenu*/
left:-20px;
display:none;
}
.menu li:hover ul, /*aqui em hover são dois pontos*/
.menu li ul li:hover ul,
.menu li.over ul, /*Cuidado: aqui em over é apenas um ponto*/
.menu li ul li.over ul {
display:block;
}
.menu li ul li {
border:1px solid #DEB887;
display:block;
width:50px; /*aumenta a largura do bloco do submenu*/
height:25px;
line-height:15px;/*Centraliza verticalmente*/
}