Cambia tu CSS por este:
Código:
/* menú */
#menu ul{list-style:none;margin:0;padding:0;}
#menu li{float:left;}
#menu a{font: 1em 'times new roman';text-align:center;text-decoration:none;width:120px;display:block;outline:none;}
#menu a:link, #menu a:visited{color:#fff;background:#00f;border:#009 solid 1px;}
#menu a:hover{color:#000;background:#0f0;border:#090 solid 1px;}
#menu a:focus, #menu a:active{color:#000;background:#f00;border:#900 solid 1px;}
/* submenú desplegable */
#menu ul>li>ul{display:none;position:absolute;}
#menu ul>li:hover>ul{display:block;}
#menu li>ul>li{clear:left;}
#menu li>ul>a:link, #menu>li>ul>a:visited{color:#fff;background:#99f;border:#00f solid 1px;}
#menu li>ul>a:hover{color:#000;background:#9f9;border:#0f0 solid 1px;}
#menu li>ul>a:focus, #menu>li>ul>a:active{color:#000;background:#f99;border:#f00 solid 1px;}
/* segundo submenú desplegable */
#menu ul li ul li ul{display: none; position:absolute; left: 12px; margin-top: -20px;}
#menu ul li ul li:hover ul{display:block;}
#menu li ul li ul a:link, #menu li ul li ul a:visited{color:#fff;background:#99f;border:#00f solid 1px;}
#menu li ul li ul a:hover{color:#000;background:#9f9;border:#0f0 solid 1px;}
#menu li ul li ul a:focus, #menu li ul li ul a:active{color:#000;background:#f99;border:#f00 solid 1px;}
Y luego mete ul dentro de las listas tal y como hacías antes:
Código HTML:
<div id="menu">
<ul>
<li><a href="#">Ingenierias</a>
<ul>
<li><a href="#">Administracion</a></li>
<li><a href="#">Sistemas Computacionales</a>
<ul>
<li><a href="#">Submenú</a></li>
</ul>
</li>
<li><a href="#">Industrial</a></li>
<li><a href="#">Quimica</a></li>
<li><a href="#">Bioquimica</a></li>
</ul>
</li>