Quiero hacer un menu vertical desplegable, la idea es que cuando se de click en Link1, se despliegue sub1 y sub2. Al desplegarse, Link2 y Link3 deberian correrse hacia abajo, en explorer esta funcionando pero en firefox no. que puede ser ?
Pongo aca todo el codigo junto para que lo puedan ver, gracias
Cita:
<html>
<title>Test</title>
<script type="text/javascript">
function changeme(obj){
if (obj.style.display=="block") {
obj.style.display="none";
}
else {
obj.style.display="block";
}
}
</script>
<style type="text/css">
#menu1 {
border-style: solid 1px;
border-color: #3D261D;
border-size: 1px;
border-width: 1px;
width:200px;
margin: 4px 0 0 3px;
float:left;
}
#menu1 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu1 ul li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
display: block;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
padding: 8px 0 0 10px;
}
#menu1 li a:hover {
color: #FFF;
padding: 8px 0 0 10px;
}
#submenu {
border-style: none;
width:200px;
margin: 0 0 0 0;
float:left;
display: none;
}
</style>
</head>
<body>
<div id="menu1">
<ul>
<li><a href="#1" title="Link 1" onClick="changeme(submenu)">Link1</a></li>
<div id="submenu">
<ul>
<li><a href="#1" title="sub1">Sub1</a></li>
<li><a href="#2" title="sub2">Sub2</a></li>
</ul>
</div>
<li><a href="#2" title="Link 2">Link2</a></li>
<li><a href="#3" title="Link 3">Link3</a></li>
</ul>
</div>
</body>
</html>
<title>Test</title>
<script type="text/javascript">
function changeme(obj){
if (obj.style.display=="block") {
obj.style.display="none";
}
else {
obj.style.display="block";
}
}
</script>
<style type="text/css">
#menu1 {
border-style: solid 1px;
border-color: #3D261D;
border-size: 1px;
border-width: 1px;
width:200px;
margin: 4px 0 0 3px;
float:left;
}
#menu1 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu1 ul li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
display: block;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
padding: 8px 0 0 10px;
}
#menu1 li a:hover {
color: #FFF;
padding: 8px 0 0 10px;
}
#submenu {
border-style: none;
width:200px;
margin: 0 0 0 0;
float:left;
display: none;
}
</style>
</head>
<body>
<div id="menu1">
<ul>
<li><a href="#1" title="Link 1" onClick="changeme(submenu)">Link1</a></li>
<div id="submenu">
<ul>
<li><a href="#1" title="sub1">Sub1</a></li>
<li><a href="#2" title="sub2">Sub2</a></li>
</ul>
</div>
<li><a href="#2" title="Link 2">Link2</a></li>
<li><a href="#3" title="Link 3">Link3</a></li>
</ul>
</div>
</body>
</html>
