Hacer un menu V2

Lo primero que tenemos que hacer es editar este HTML 


<ul id="menu-horizontal"> <li><a href="#" _fcksavedurl="#" title="Nombre del menu ">Pon aqui el texto del desplegable 1</a></li> <li><a href="#" _fcksavedurl="#" title="Nombre del menu">Pon el nombre del desplegable 2</a></li> <li><a href="#" _fcksavedurl="#" title="Nombre del menu">Pon el nombre del desplegable 3</a> <ul>   

Para  que quede en pocision horizontal hay que poner el siguiente CSS 


l#menu-horizontal li { float: left; display: inline; position: relative;} ul#menu-horizontal ul { display: none; position: relative; top: 24; left:0; margin:0; padding:0; background:#FFFFFF; }   

Para ocultar los submenus  y que cuando pases el cursor por el menu se abran  hay que pegar el siguiente CSS





 
ul#menu-horizontal ul { display: none; position: relative; top: 24; left:0; margin:0; padding:0; background:#FFFFFF; } ul#menu-horizontal ul li { display: block !important; } ul#menu-horizontal li:hover ul{ display: none; } ul#menu-horizontal li:hover ul{ display: block; }  

Para darle mas diseño hay que poner el siguiente codigo CSS 
ul#menu-horizontal ul { display: none; position: relative; top: 24; left:0; margin:0; padding:0; background:#FFFFFF; } ul#menu-horizontal ul li { display: block !important; } ul#menu-horizontal li:hover ul{ display: none; } ul#menu-horizontal li:hover ul{ display: block; }