MENÚ DESPLEGABLE

Aquí tenéis un menú des plegable sin tocar la plantilla HTML, Lo ponéis en un gadget HTML-JAVASCRIPT ,mejor ponerlo en la parte de arriba justo debajo de la cabecera , os dejo 4 pestañas con subpestañas que podéis ampliar, se puede cambiar el color , el tipo de letra y el tamaño , en donde aparece "#" ponéis la URL que queráis y donde pone MENÚ , el titulo de la pestaña.



CÓDIGO

.script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


 <script type="text/javascript">
 function mainmenu(){
 $(" #nav ul ").css({display: "none"}); // Opera Fix
 $(" #nav li").hover(function(){
 $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
 },function(){
 $(this).find('ul:first').css({visibility: "hidden"});
 });
 }
 $(document).ready(function(){    
 mainmenu();
 });
 </script>

 <style type="text/css">
 /**** CODIGO DEL COLOR *****/
 #menu a, #menu li, #menu li li{
 background-color:  blue;
 }

 #menu a:hover, #menu li:hover, #menu li li:hover{
 background-color: aqua;
 text-decoration: underline;
 }
 /****** FIN ********/

 #nav{
 padding: 0;
 list-style-type:none;
 list-style-position:outside;
 overflow: visible;
 }
 #nav a{
 display: block;
 overflow: visible;
 border: none 0px;
 }

 #menu{
 height: 50px;
 border: none 0px;
 }

 #menu ul {
 margin: 0;
 list-style: none;
 float: left;
 }

 #menu li.parent {
 position: relative;
 margin-left: 5px;
 display: block;
 float: left;
 z-index: 3;
 width: auto;
 list-style: none;
 border: none 0px;
 }

 #menu li {
 position: relative;
 margin: 0;
 z-index: 3;
 width: auto;
 border: none 0px;
 }

 #nav ul {
 position: absolute;
 top: 26px;
 left 0px;
 z-index: 33;
 width: 150px;
 visibility: hidden;
 border: none 0px;
 overflow: visible;
 list-style-type:none;
 }

 #nav ul ul
 {
 left: 148px;
 top: 0px;
 width: 150px;
 border: none 0px;
 overflow: visible;
 }

 .ul-child li a{
 margin: 0px;
 padding:0;
 z-index: 2;
 position: relative;
 display: block;
 width: 100%;
 border: none 0px;
 }

 .ul-child li{
 margin: 0px;
 padding: 0px;
 border: none 0px;
 }

 #menu li a{
 text-decoration: none;
 border: none 0px;
 padding: 5px 10px;
 }

 #menu li.list{
 border: none 0px;
 width: 150px;
 }

 #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
 display:none;
 }
 #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
 display:block;
 }

 .tabs-outer
 {
 overflow: visible;
 }
 </style>

 <div id="menu">
 <ul id="nav">
 <li class="parent"><a href="#">MENU- 1</a></li>
 <li class="parent"><a href="#">MENU-2</a>
 <ul>
 <li class="list"><a href="#">SUBMENU-1</a>
 <ul>
 <li class="list"><a href="#">SUBMENU-2</a></li>
 <li class="list"><a href="#">SUBMENU-2.2</a></li>
 <li class="list"><a href="#">SUBMENU-2.3</a></li>
 </ul>
 </li>
 <li class="list"><a href="#">SUBMENU-1.2</a></li>
 <li class="list"><a href="#">SUBMENU-1.3</a></li>
 </ul>
 </li>
 <li class="parent"><a href="#">MENU-3</a>
 <ul>
 <li class="list"><a href="#">SUBMENU-3</a>
 <ul>
 <li class="list"><a href="#">SUBMENU-3</a></li>
 <li class="list"><a href="#">SUBMENU-3.2</a></li>
 <li class="list"><a href="#">SUBMENU-3.3</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li class="parent"><a href="#">MENU-4</a></li>
 </ul>
 </div>
Etiquetas: