# menue verschwindet wenn maus über iframe



## missmo (8. Dezember 2005)

Hallo Leute

Meine vertikale Navigation mit Untermenus steht direkt neben dem iframe.

Problem: wenn das untermenue über dem iframe aufgeht und ich will mit der maus drauf, verschwindet dieses submenue. im firefox ist dies gar kein prob, in safari und netscape aber schon, und Opera macht das submenu sowieso hinter dem iframe auf. im ie habe ich gar noch nicht geschaut, weil ich die weiche für css noch nicht gemacht habe. 
bis jetzt konnte ich nur auf mac testen


```
<body >
<div>
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="500" bgcolor="#430000">&nbsp;</td>
      <td width="196" height="400" align="left" valign="top" bgcolor="#333333"><br />
	  <ul id="menue">
	  <li>unser muotathal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	     <ul id="submenu">
			<li><a href="#">&nbsp;&nbsp;&nbsp;lageplan</a></li>
			<li><a href="#">&nbsp;&nbsp;&nbsp;karte</a></li>
			<li><a href="#">&nbsp;&nbsp;&nbsp;links</a></li>
		</ul>
	</li>
	
	<li>abenteuer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<ul id="submenu">
			<li>im sommer
			<ul id="subsubmenu">
				<li><a href="inhalt/abenteuer/so/muotaraft.html" target="inhalt">muotaraft</a></li>
				<li><a href="#">wanderungen</a></li>
				<li><a href="#">..........</a></li>
				<li><a href="#">..........</a></li>
			</ul>
			</li>
			<li>im winter
			<ul id="subsubmenu">
				<li><a href="#">iglunacht</a></li>
				<li><a href="#">schneeschuh</a></li>
				<li><a href="#">..........</a></li>
				<li><a href="#">..........</a></li>
			</ul></li>
			<li>das ganze jahr
			<ul>
				<li><a href="#">husky-traum</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			</ul>
	</li>
			
	<li>kultur &amp; bildung&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	  		<ul id="submenu">
			<li>im sommer
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul>
			</li>
			<li>im winter
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			<li>das ganze jahr
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			</ul>
	</li>
		
		<li>gruppen &amp; firmen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	  		<ul id="submenu">
			<li>im sommer
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul>
			</li>
			<li>im winter
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			<li>das ganze jahr
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			</ul>
		</li>


	<li>freizeitd&ouml;rfli&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  	<ul id="submenu">
			<li>&uuml;bersicht
			<ul>
				<li><a href="#">karte</a></li>
				<li><a href="#">bilder</a></li>
			</ul>
			</li>
			<li><a href="#">g&auml;stehaus</a></li>
			<li>g&auml;steh&uuml;ttli
			<ul>
				<li><a href="#">family</a></li>
				<li><a href="#">junior</a></li>
			</ul>
			</li>
			<li>huskys
			<ul id="submenu">
				<li><a href="#">huskygehege</a></li>
				<li><a href="#">huskybar</a></li>
			</ul>
			</li>
			<li><a href="#">camping &amp; zeltplatz</a></li>
			<li><a href="#">d&ouml;rfliteam</a></li>
			</ul>
	</li>

		<li>unser team&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<ul id="submenu">
			<li><a href="#">g&auml;steleiter/-innen</a></li>
			<li><a href="#">leitbild</a></li>
			<li><a href="#">ausbildung</a></li>
			</ul>
		  </li>
	<li>unsere hunde&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<ul id="submenu">
			<li><a href="#">g&ouml;nner &amp; paten</a></li>
			<li><a href="#">huskygehege</a></li>
			<li><a href="#">portraits</a></li>
			<li><a href="#">schnappsch&uuml;sse</a></li>
			</ul>
	</li>
	<li>arrangements&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<ul id="submenu">
			<li><a href="#">skitouren im winter</a></li>
			<li><a href="#">skitouren-kurse</a></li>
			<li><a href="#">musher-kurs</a></li>
			<li><a href="#">erlebniscamp</a></li>
			</ul>
	</li>
</ul>

      <td width="584" rowspan="2" align="left" valign="top" bgcolor="#001A3B"><div id="inhalt"><iframe src="table_test.html" frameborder="0"  scrolling="auto"  name="inhalt"></iframe></div><td height="500" bgcolor="#001A3B"></td>
    </tr>
    <tr>
      <td bgcolor="#430000">&nbsp;</td>
      <td width="196" bgcolor="#430000">&nbsp;</td>
      <td bgcolor="#001A3B">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
```


```
#inhalt {
	z-index: 1;
	height: 100px;
	width: 584px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: hidden;
	visibility: visible;
}

#menue, #menue ul
{
	list-style-type:	none;
	padding:		0;
	margin:			0;
}

#menue li > ul
{
	position:		relative;
	left:			183px;
	top:			-25px;
	display:		none;
}

#menue li:hover > ul
{
	display:		block;
	z-index:		4;
}

#submenu li > ul
{
	position:		relative;
	left:			107px;
	top:			-16px;
	display:		none;
}

#submenue li:hover > ul 
{
	display:		block;
	z-index:		3;
}


body 
{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #CCCCCC;
}

#menue li
{
	margin: 		0;
	height: 		34px;
	line-height: 		34px;
	text-align: 		right;
	color:			#CCCCCC;
	text-decoration:	none;
	background-color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	width: 196px;
	top: 257px;
	cursor: pointer;
	visibility: visible;
	display: block;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	list-style-type: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-left-color: #999999;
	z-index:5;
}
 #menue li:hover {
	margin: 		0;
	height: 		34px;
	line-height: 		34px;
	text-align: 		right;
	color:			#121212;
	text-decoration:	none;
	background-color: #636363;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: inset;
	border-bottom-color: #333333;
	width: 196px;
	top: 257px;
	cursor: pointer;
	z-index:5;
	visibility: visible;
	display: block;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	list-style-type: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-left-color: #999999;
	white-space: nowrap;
}

#submenu li
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 26px;
	font-weight: bold;
	font-variant: normal;
	color: #CCCCCC;
	text-decoration: none;
	background-color: #333333;
	height: 26px;
	width: 129px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 4;
}
#submenu li:hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 26px;
	font-weight: bold;
	font-variant: normal;
	color: #121212;
	text-decoration: none;
	background-color: #636363;
	height: 26px;
	width: 129px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 4;
}
#subsubmenu li
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 22px;
	font-weight: bold;
	font-variant: normal;
	color: #CCCCCC;
	text-decoration: none;
	background-color: #333333;
	height: 22px;
	width: 130px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 3;
}
#subsubmenu li:hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 22px;
	font-weight: bold;
	font-variant: normal;
	color: #121212;
	text-decoration: none;
	background-color: #636363;
	height: 22px;
	width: 130px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 3;
}
```

ich traute mich noch nicht alles mit css zu machen (und verzeiht mir eventuellen code, darum habe ich auch die guten alten tables drin)


----------



## fish-guts (8. Dezember 2005)

Moin

 Hast du deinem iframe einen z-index gegeben? Wenn nicht, versuch ihn damit unter das Menu zu legen.

 Gruss

 FG


----------



## missmo (8. Dezember 2005)

fish-guts hat gesagt.:
			
		

> Moin
> 
> Hast du deinem iframe einen z-index gegeben?  FG



Ja, ansonsten würde ich die submenus ja in keinem browser sehen; ich habe dem iframe den kleinsten z-index gegeben zuerst über css jetzt direkt in den tag geschrieben
so -->
	
	
	



```
<td width="584" rowspan="2" align="left" valign="top" bgcolor="#001A3B"><iframe src="table_test.html" style="z-index:1;"  frameborder="0"  scrolling="auto"  width="584" height="400" name="iframe"></iframe><td height="500" bgcolor="#001A3B">
```

ansonsten wenn die iframes nicht so der hammer sind, muss ich es wohl oder übel anders machen

gibt es da nicht eine bessere möglichkeit aber wenn möglich ohne php


----------



## missmo (8. Dezember 2005)

ansonsten hier ein link zum dreinschauen

http://www.erlebniswelt.ch/neu/start.html


----------



## fish-guts (8. Dezember 2005)

Moin

 Naja, da würde ich sowieso nicht mit iframes lösen. Nimm dazu lieber die PHP-Funktion include()

 Gruss

 FG


----------

