¿Cómo dar transition a este menú?

Tengo este html:

<div id="menu">
<ul>
	<li class="nivel1"><a href="#" class="nivel1">Inicio</a></li>
	<li class="nivel1"><a href="#" class="nivel1">Nosotros</a></li>	
	<li class="nivel1"><a href="#" class="nivel1">Marcas</a>
		<ul class="nivel2">
			<li><a href="#">Opción 2.1</a></li>
			<li><a href="#">Opción 2.2</a></li>
			<li class="nivel2"><a class="nivel2" href="#">Opción 2.3 »</a>
				<ul class="nivel3">
					<li><a class="primera" href="#">Opción 2.3.1</a></li>
					<li><a href="#">Opción 2.3.2</a></li>
					<li><a href="#">Opción 2.3.3</a></li>
				</ul>
			<li><a href="#">Opción 2.4</a></li>
			<li><a href="#">Opción 2.5</a></li>
			</li>
		</ul>
	</li>
	</li>
	<li class="nivel1"><a href="#" class="nivel1">Ropa</a>
	<ul class="nivel2">
		<li><a href="#">Chaquetas</a></li>
		<li><a href="#">Abrigos</a></li>
		<li><a href="#">Camisetas</a></li>
	</ul>
	</li>
	<li class="nivel1"><a href="#" class="nivel1">Regalos</a>
	<ul class="nivel2">
		<li><a href="#">Opción 4.1</a></li>
		<li><a href="#">Opción 4.2</a></li>
		<li><a href="#">Opción 4.3</a></li>
		<li><a href="#">Opción 4.4</a></li>
	</ul>
	</li>
	<li class="nivel1"><a href="#" class="nivel1">Contacto</a></li>
</ul>

...que tiene este CSS:

#menu {
	text-align: center;
	font-size: 20px;
	width: 100%;
	margin: 20px auto;
}

#menu ul {
	list-style-type: none;
}

#menu ul li {
	width: 162px;
	margin: 0 1%;
}

#menu ul li.nivel1 {
	float: left;
	margin-right: 1px;
}

#menu ul li a {
	display: block;
	text-decoration: none;
	color: rgba(47,21,146,.8);
	background-color: rgba(220,220,220,.7);
	border: solid 1px #fff;
	padding: 8px;
	position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {
	color: #000;
}

#menu ul li a.nivel1, #menu ul li a.nivel2 {
	display: block!important;
	display: none;
	position: relative;
}

#menu ul li:hover {
	position: relative;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
	background-color: #5843D0;
	color: white;
	position: relative;
}

#menu .nivel1:hover  a.nivel1{
	letter-spacing: .3em;
}

#menu ul li ul {
	display: none;
}

#menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{
	display: block;
	position: absolute;
	left: 0px;
}

#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
	display: block;
	position: absolute;
	left: 159px!important;
	left: 158px;
	top:0px!important;
	top: -21px;
}

#menu ul li ul li a {
	width: 159px;
	padding: 8px 0px;
	border-top-color: transparent;
}

#menu ul li ul li a:hover {
	border-top-color: yellow;
	position: relative;
}

#menu ul li ul li ul li a.primera {
	border-top-color: #fff;
}

table.falsa {
	border-collapse:collapse;
	border:0px;
	float: left;
	position: relative;
}

¿Cómo puedo darle el efecto de transition? Gracias, un saludo.

echale un vistazo a este tutorial (http://www.youtube.com/watch?v=dlDQ43y3vUE#t=494) los tutoriales de este chaval me han ayudado bastante a entender las transiciones

Gracias, ya me han indicado que un desplegable no puede tener transition. Saludos.