Buenas, el problema que tengo es que no puedo hacer que este menú se vea bien en IE y FF. En FF lo veo bien, es decir en el sub menú un ítem debajo de otro; pero en IE no puedo hacer que queden los ítems del submenú uno abajo del otro sin romper otra cosa…
Este sería todo el code:
--------------------------------------------------------------------------------------------------
<!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=utf-8" />
<title>menu</title>
</script>
<style type="text/css">
.menu_resize { background:url(menu_resize.gif) top no-repeat; padding:0; margin:0; width:800px; height:43px;}
.menu { float:left; padding:1px 0 0 7px; margin:0; width:800px; height:43px; }
.menu ul { text-align:left; padding:0; margin:0; list-style:none; border:0; }
.menu ul li { float:left; margin:0; padding:0; border:0; }
.menu ul li a { float:left; margin:0; padding:14px 0; color:#fefefe; font:normal 8pt Verdana, Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:14px 11px; background:none; }
.menu ul li a:hover { background: url(r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(l_menu.gif) no-repeat left; }
#jsddm li ul { margin:0; display:block; padding:0; position:absolute; visibility:hidden; height:1px; }
#jsddm li ul li { display:block; margin-top:42px; float:none; }
#jsddm li ul li a { width:150px; background:#9F1B1B;padding:7px 20px; border-bottom:1px dotted #7F1616; border-right:1px dotted #7F1616; }
#jsddm li ul li a:hover { background: #7F1616 url(l_menu.gif) no-repeat left; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
</script>
</head>
<body>
<div class="menu_resize">
<div class="menu">
<ul id="jsddm">
<li><a href="#"><span>Menu1</span></a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li><a href="#"><span>Menu2</span></a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li><a href="#"><span>Menu3</span></a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li><a href="#"><span>Menu4</span></a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li><a href="#"><span>Menu5</span></a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li><a href="#"><span>Menu6</span></a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li><a href="#"><span>Menu7</span></a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------
Gracias por cualquier ayuda!
