CSS - Sub menu CSS

<link href="estilos/menu.css" rel="stylesheet" type="text/css" >

<div id="menu" >

	<ul>

		<li><a href="#">Home</a></li>

		<li><a href="#">Lista 1</a></li>

		<li><a href="#">Lista 2</a></li>

		<ul>

			<li><a href="#">Lista 2 2</a></li>

			<li><a href="#">Lista 2 3</a></li>

		</ul>

		<li><a href="#">Lista 3</a></li>

		<li><a href="#">Contacto</a></li>

	</ul>

</div>

#menu  {

	 margin: 0px 0px 0px 0px;

	 height: 27px;

	  background-color:#FFE1BC; 

	 /*background-color:black;*/

	 text-align:left;

}

#menu ul{

	 margin:0px 0px 0px -40px;

	 height: 27px;

}

#menu li{

	 list-style:none;

	 float:left;

	 padding: 4px 8px ;

	 /* background-color:#004C98; */

	 font-family:Tahoma;

	 width:100px;

	 text-align:center;

     /*background: -webkit-linear-gradient(#09176E, #78A7D7);

 	 background: -moz-linear-gradient(#09176E, #78A7D7);

 	 background: -o-linear-gradient(#09176E, #78A7D7);

 	 background: linear-gradient(#09176E, #78A7D7); */

	 margin-right:3px;

}

#menu li:hover{

	 /*background: -webkit-linear-gradient(#78A7D7,#09176E);

 	 background: -moz-linear-gradient(#78A7D7,#09176E);

 	 background: -o-linear-gradient(#78A7D7,#09176E);

 	 background: linear-gradient(#78A7D7,#09176E);*/

 	 background: -webkit-linear-gradient(#FFFFFF,#FFE1BC);

 	 background: -moz-linear-gradient(#FFFFFF,#FFE1BC);

 	 background: -o-linear-gradient(#FFFFFF,#FFE1BC);

 	 background: linear-gradient(#FFFFFF,#FFE1BC);

}

a

{

	/*color:#FFFFFF; */

	 color:#CA2800;

	text-decoration:none;

}

// desde php 

  echo "<ul class=mi-menu>";

                 echo " <li><a href=URL_enlace_1> texto_enlace_1 </a></li>";

                echo "  <li>";

                echo "   <a href='#'> texto_enlace_2 </a>";

                echo "    <ul>";

                 echo "     <li><a href=URL_enlace_2.1> texto_submenú_2.1 </a></li>";

                 echo "     <li><a href=URL_enlace_2.2> texto_submenú_2.2 </a></li>";

                 echo "     <li><a href=URL_enlace_2.3> texto_submenú_2.3 </a></li>";

                 echo "   </ul>";

                echo "  </li>";

              echo "    <li><a href=URL_enlace_3> texto_enlace_3 </a></li>";

              echo "  </ul>";

//desde css

 .mi-menu li:hover > ul { opacity: 2;}

   /* cada un ode los items de los submenús */

  .mi-menu ul li {

    height: 0; /* no son visibles */

    overflow: hidden;

    padding: 0;

    /* animamos su visibildiad */

    -moz-transition: height .25s ease .1s;

    -webkit-transition: height .25s ease .1s;

    -o-transition: height .25s ease .1s;

    -ms-transition: height .25s ease .1s;

    transition: height .25s ease .1s;

  }

  .mi-menu li:hover > ul li {

    height: 36px; /* los mostramos  afecta la lista desplegable*/

    width:206px;

    overflow: visible;

    background:plate;

    border:4px;

    padding:0;

  }

  .mi-menu ul li a {

    border:3px;

    margin: 3px;

    /* el ancho dependerá de los textos a utilizar */

    padding: 5px 20px;

    width: 100px;

  }

  /* el último n otiene un borde */

  .mi-menu ul li:last-child a { border: none; }