Problemer med meny

[MrBjoern]

Sitter å jobber med en dropdown meny nå. Den funker fint den, men det er ett lite problem jeg ikke får løst.

 

Aller først, her har dere css, js og html kode

 

CSS

 

 

<style>
body{
	font-family:arial;
}

table{

}

a.menu{
	color: #000000;
	text-decoration:none;
	font-weight: bold;
}

a.menu:hover{
	color: #23bfd2;
}

td.menu{
	border: 2px solid #25bfd2;
	padding: 5px;
	background-color: #bae1e5;
	margin-left: 30px;
}

tr.menu{
	background-color: #333333;
	padding: 5px;
}

table.menu{
	width: 120px;
	position: absolute;
	visibility: hidden;
}
</style>

 

 

 

JS

 

 

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"; 
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>

 

 

 

HTML

 

 

<table>
<tr> 
	<td onmouseover="showmenu('menua')" onmouseout="hidemenu('menua')">
	<a href="#" class="menu">Menu a</a><br />
	<table class="menu" id="menua"> 
		<tr><td class="menu"><a href="#" class="menu">Side1</a></td></tr>
		<tr><td class="menu"><a href="#" class="menu">Side2</a></td></tr> 
		<tr><td class="menu"><a href="#" class="menu">Side3</a></td></tr>
		<tr><td class="menu"><a href="#" class="menu">Side4</a></td></tr> 
		<tr><td class="menu"><a href="#" class="menu">Side5</a></td></tr>
			<tr>
				<td onMouseOver="showmenu('menu1')" onMouseOut="hidemenu('menu1')">
				<a href="#" class="menu">menu 1</a>
				<table class="menu" id="menu1"> 
					<tr><td class="menu"><a href="#" class="menu">Side1</a></td></tr>
					<tr><td class="menu"><a href="#" class="menu">Side2</a></td></tr> 
					<tr><td class="menu"><a href="#" class="menu">Side3</a></td></tr>
					<tr><td class="menu"><a href="#" class="menu">Side4</a></td></tr> 
					<tr><td class="menu"><a href="#" class="menu">Side5</a></td></tr>
				</table>
				</td>
			</tr>
		<tr><td class="menu"><a href="#" class="menu">Side1</a></td></tr>
		<tr><td class="menu"><a href="#" class="menu">Side2</a></td></tr>
	</td>
</tr>
</table>
 <td onMouseOver="showmenu('menub')" onMouseOut="hidemenu('menub')"> 
  <a href="#" class="menu">menu b</a><br />
  <table class="menu" id="menub">
  <tr><td class="menu"><a href="#" class="menu">Side1</a></td></tr> 
  <tr><td class="menu"><a href="#" class="menu">Side2</a></td></tr>
  <tr><td class="menu"><a href="#" class="menu">Side3</a></td></tr> 
  <tr><td class="menu"><a href="#" class="menu">Side4</a></td></tr>
  <tr><td class="menu"><a href="#" class="menu">Side5</a></td></tr> 
  </table>
 </td>
 <td onMouseOver="showmenu('menuc')" onMouseOut="hidemenu('menuc')">
  <a href="#" class="menu">menu c</a><br />
  <table class="menu" id="menuc"> 
  <tr><td class="menu"><a href="#" class="menu">Side1</a></td></tr>
  <tr><td class="menu"><a href="#" class="menu">Side2</a></td></tr> 
  <tr><td class="menu"><a href="#" class="menu">Side3</a></td></tr>
  <tr><td class="menu"><a href="#" class="menu">Side4</a></td></tr> 
  <tr><td class="menu"><a href="#" class="menu">Side5</a></td></tr>
  </table>
 </td>
</tr>
</table>

 

 

 

Ja, menyen er kodet i tables. Av den enkle grunn at jeg kom over en dropdown meny med tables, og jeg har ikke giddet å kode den om til noe "bedre"

 

Nå, problemet.

 

I IE så legger dropdown menyen, som er innenfor den første. Seg fint ca 40px til høyre. I Opera, åpnes den nye menyen på samme linje som den første. Om dere skjønner. Dette ser ikke like pent ut, og er mindre funksjonabelt, da man praktisk talt ikke får trykket på evt linker som ligger lengre nede i den første menyen.

 

Så er det sikkert masse unødvendig kode der, så bare si i fra.

 

mrbjoern

[Pilot_]

Er det mulig å se en demo av menyen?

 

"Bilde sier mer enn tusen ord"

[MrBjoern]

IE

 

Opera