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.