Menú desplegable con CSS3

Gracias a css3 es posible crearnos menús desplegables sin usar alguna librería o plugin externo, y el resultado es bastante bueno..

El marcado en HTML sería asi:

<nav>
<ul>
<li><a href="#" class="activo">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Ministries</a>
<ul>
<li><a href="#">Women</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Kids</a></li>
<li><a href="#">Others</a>
<ul>
<li><a href="#">Family</a></li>
<li><a href="#">Marrieges</a></li>
</ul>
</li>
</ul>

</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

y en css hacemos lo siguiente:

body{ font-family: 'Open Sans', sans-serif; font-weight: lighter; }
nav { background-color: #e74c3c; text-align: center; width: 700px; margin: 0 auto; height: 42px; }
nav ul { list-style: none; position: relative; display: inline-table;}
nav ul:after { content: ""; clear: both; display: block; }
nav ul li:hover > ul { display: block; }
nav ul li { float: left; text-transform: uppercase;  }
nav ul li a { display: block; padding: 10px 20px 10px 10px; color: #fff; text-decoration: none; font-size: 24px; }
nav ul li a:hover { color: #2c3e50; }
nav ul ul { display: none; background: #e74c3c; border-radius: 0px; padding: 0; position: absolute; top: 100%; }
nav ul ul li { float: none; border-bottom: 1px solid #fff; position: relative; }
nav ul ul li a { padding: 15px 15px 5px 15px; color: #fff; }

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

Les dejo una demostración debajo, espero les sirva.