Siga os passos abaixo para criar seu próprio menu dropdown para seu site utilizando apenas CSS.

Primeiro, defina seus links no HTML, para nosso exemplo, usaremos a tag nav do HTML5

<nav>
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Tutoriais</a>
			<ul>
				<li><a href="#">Php</a></li>
				<li><a href="#">Java</a></li>
				<li><a href="#">SQL</a>
                                     <ul>
                                          <li><a href="#">PostgreSQL</a></li>
                                          <li><a href="#">MySql</a></li>
                                     </ul>
                                </li>
			</ul>
		</li>
		<li><a href="#">Redes Sociais</a>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
			</ul>
		</li>
		<li><a href="#">Sobre</a></li>
	</ul>
</nav>

Então veja que o mapa do menu ficou da seguinte maneira:

• Inicio
• Tutoriais
  • Php
  • Java
  • SQL
    • PostgreSQL
    • MySql
• Redes Sociais
  • Facebook
  • Twitter
• Sobre

Agora, visualizando como ficou a hierarquia de links, passamos para o CSS:

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

Iniciando com a primeira funcinalidade de um menu dropdown, nós escondemos todas as sublistas (declarações ul dentro do primeiro ul) com display:none. Depois,  adicionamos para aparecer as sublistas (ul) de cada elemento da lista (li) quando o mouse passar sobre (hover). O símbolo ‘>’ afirma que somente as sublistas filhas do elemento em questão (o qual você está com o mouse em cima) aparecerá.

nav ul {
	list-style:none;
	padding: 0 20px;
	position:relative;
	display:inline-table;
}
nav ul:after {
	content: ""; clear:both; display:block;
}

O position:relative nos permitirá posicionar sub menus de acordo com a barra de navegação principal.  O display:inline-table condensará a largura do menu. Agora tratando primeiro e segundo nível

nav ul li {
	float:left;
}
nav ul li a{
	float:left;
	padding:5px 20px;
}
nav ul ul li {
	float:none;
}

Agora basta tratar o terceiro nível do submenu.

nav ul ul ul {
	position:absolute;
	left:100%;
	top:0;
}

Pronto, a estrutura básica do menu está criada. Basta adicionar um design, de acordo seu site, e publicar. Uma demostração deste menu, já com um design mais arrojado, utilizando artifícios do CSS3, pode ser vista no site Line25.