problema con menu

oscar2h · #1 (**permalink**) 04/02/2009, 16:00

buenas a todos, quiero que me ayuden, tengo un problema con el menu, quiero que al posar el mouse sobre el menu, este me despliegue los menus abajo y no al lado como me esta saliendo ami, antes probe con este codigo y funciona bien, y en Firefox = funciona, espero su ayuda, gracias

estilo.css

Código PHP:

  #menu_superior

{

background-color:#CCCCCC;

position:absolute;

top:15px;

right:100px;

left:10px;

bottom:505px;

}

 
#menu_lateral

{

background:#CCCCCC;

position:absolute;

top:100px;

left:10px;

right:820px;

bottom:50px;

}

 
#contenedor

{

background:#CCCCCC;

position:absolute;

top:100px;

left:220px;

right:100px;

bottom:50px;

}

 
ul{

padding:0;

margin:0;

list-style:none;

}

 
#menu_superior li

{

float:left;

list-style:none;

position:relative;

width:6em;

}

 
li ul

{

display:none;

position:absolute;

top:1em;

left:0;

}

 
li > ul

{

top:auto;

left:auto;

}

 
li:hover ul, li.over ul

{

display: block;

}

Principal.php

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Pagina Principal</title>

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

<script type="text/javascript" src="javascript.js"></script>

</head>

 
<body>

 
<div id="menu_superior">

    <li>Productos

        <ul>

            <li><a href="">Ingresar Prod.</a></li>

            <li><a href="">Eliminar Prod.</a></li>

            <li><a href="">Modificar Prod.</a></li>

            <li><a href="">Buscar Prod.</a></li>

        </ul>

    </li>

    

    <li>opcion

        <ul>

            <li><a href="">Opcion</a></li>

            <li><a href="">Opcion</a></li>

            <li><a href="">Opcion</a></li>

        </ul>

    </li>

    

    <li>Opcion

        <ul>

            <li><a href="">Opcion</a></li>

            <li><a href="">Opcion</a></li>

            <li><a href="">Opcion</a></li>

        </ul>

    </li>

    

    <li>Opcion

        <ul>

            <li><a href="">Opcion</a></li>

            <li><a href="">Opcion</a></li>

            <li><a href="">Opcion</a></li>

        </ul>

        

    </li>    

</div>

 
<div id="menu_lateral">

    <li>Opcion

        <ul>

            <li>Opcion</li>

            <li>Opcion</li>

            <li>Opcion</li>

        </ul>

        

    </li>

</div>

 
<div id="contenedor">

<h1>contenido</h1>

</div>

 
</body>

</html>

javascript.js

Código PHP:

  // JavaScript Document

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("menu_superior");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

  }

  node.onmouseout=function() {

  this.className=this.className.replace(" over", "");

   }

   }

  }

 }

}

window.onload=startList;

gracias de antemano

pao01 · #2 (**permalink**) 04/02/2009, 16:53

ya has pasado por aquí?
Hay muy buenos ejemplos, gentileza de Mikmoro.