Edit in JSFiddle

$("nav li").stop(true, false).hover(function(){
	$(this).find("ul").stop(true, false).slideDown();
}, function(){
	$(this).find("ul").stop(true, false).slideUp();
});

$("ul li").hover(function(){
	$(this).stop(true, false).animate({width: "8.75em"}, 350);
}, function(){
	$(this).stop(true, false).animate({width: "7.75em"}, 350);
});

<nav>    
    <li>Inicio</li>
    <li>Especialidades
	    <ul>
		    <li>Medicina General</li>
			<li>Laboratorio</li>
			<li>Electrocardiograma</li>
            <li>Tórax</li>
			<li>Audiometría</li>
			<li>Espirometría</li>
			<li>Oftalmología</li>
			<li>Odontología</li>
			<li>Psicología</li>
		</ul>
	</li>
	<li>Exámenes</li>
	<li>Pacientes
		<ul>
			<li>Triaje</li>
			<li>Empresas afiliadas</li>
		</ul>
	</li>
	<li>Administración
		<ul>
			<li>Usuarios</li>
			<li>Categorías</li>
			<li>Auditoría</li>
		</ul>
	</li>
</nav>

*{
	transition: background .6s, color .2s, box-shadow .6s;
}

nav{
	height: 3.5em;
	background: steelblue;
	background: linear-gradient(left, steelblue 75%, white);
	background: -webkit-linear-gradient(left, steelblue 75%, white);
	background: -moz-linear-gradient(left, steelblue 75%, white);
	background: -o-linear-gradient(left, steelblue 75%, white);
}

nav li{
	display: table-cell;
	height: inherit;
	width: 8.5em;
	text-align: center;
	vertical-align: middle;
	list-style: none;
	color: white;
	font-size: 1.1em;
	cursor: pointer;
}

nav li:hover{
	background: darkslategray;
}

ul{
	display: none;
	height: auto;
	position: absolute;
}

ul li{
	background: darkslategray;
	display: block;
	width: 7.75em;
	height: auto;
	padding: .75em 0;
	margin-left: -2.05em;
}

ul li:hover{
	background: cadetblue;
}

nav, nav *{
	z-index: 9000;
}