Menú desplegable con CSS (sin usar Joomla)

<?php
/**
 * @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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <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;
    }

  </style>

  <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-->
</head>
<div id="menulinks">
  <jdoc:include type="modules" name="top" />

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

  <li><a href="#">Menú A</a>
  <ul>
  <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>  

  </ul>
  </li>

  <li><a href="#">Menú B</a>
  <ul>
  <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>

  </ul>
  </li>

  <li><a href="#">Menú C</a>
  <ul>
  <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>
  </li>

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

 </div>

</body>
</html>

Responder

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

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. 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 )

Google+ photo

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

Conectando a %s

A %d blogueros les gusta esto: