Menú desplegable con CSS (sin usar Joomla)

 * @copyright    Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved.
 * @license        GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.

// no direct access
defined('_JEXEC') or die('Restricted access');

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

  <style type="text/css"> <!--COMIENZO Menú desplegable PARTE2-->

    body {
      font-family: arial, helvetica, serif;

    #nav, #nav ul { /* all lists */
     padding: 0;
     margin: 0;
     list-style: none;
     line-height: 1;

    #nav a {
     display: block;
     width: 10em;

    #nav li { /* all list items */
     float: left;
     width: 10em; /* width needed or else Opera goes nuts */

    #nav li ul { /* second-level lists */
     position: absolute;
     background: #ccc;
     width: 10em;
     left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */

    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
     left: auto;

    #content {
     clear: left;
     color: #ccc;


  <script type="text/javascript"><!--//--><![CDATA[//><!--

   sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
       sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
     sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  if (window.attachEvent) window.attachEvent("onload", sfHover);

  //--><!]]></script> <!--FIN Menú desplegable PARTE1-->
<div id="menulinks">
  <jdoc:include type="modules" name="top" />

   <ul id="nav"> <!--COMIENZO Menú desplegable PARTE2-->

  <li><a href="#">Menú A</a>
  <li><a href="#">Submenú A1</a></li>
  <li><a href="#">Submenú A2</a></li>
  <li><a href="#">Submenú A3</a></li>
  <li><a href="#">Submenú A4</a></li>  


  <li><a href="#">Menú B</a>
  <li><a href="#">Submenú B1</a></li>
  <li><a href="#">Submenú B2</a></li>
  <li><a href="#">Submenú B3</a></li>
  <li><a href="#">Submenú B4</a></li>


  <li><a href="#">Menú C</a>
  <li><a href="#">Submenú C1</a></li>
  <li><a href="#">Submenú C2</a></li>
  <li><a href="#">Submenú C3</a></li>
  <li><a href="#">Submenú C4</a></li> 


  </ul> <!--FIN Menú desplegable PARTE2-->




Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de

Estás comentando usando tu cuenta de Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )


Conectando a %s

A %d blogueros les gusta esto: