✔ Submenü blendet direkt wieder aus in Firefox

M

MigaMonstruo

Hallo!
Ich habe für eine Internetseite ein CSS-Listenmen erstellt, welches bis gestern auch noch problemlos funkltionierte.
Meiner meinung nach, habe ich nichts daran verändert, aber trotzdem blendet das submenü, wenn ich die maus vom hauptpunkt nehme sofort aus (in firefox)
Vllt kann mir jemand weiterhelfen?
Bin eigentlich kein Homepage profi, aber hab versprochen mich mal ein bisschen um diese seite zu kmmern, soweit ich kann ^^

HTML: 
<html>
<head>
<title>XXXXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../css/start.css" type="text/css">
<style>
<!--
		p { font-family:"Arial"; font-size:x-small }
-->
</style>
</head>

<body bgcolor="#000000" text="#EF0000" link="#EF0000" vlink="#EF0000" alink="#EF0000">
<p>
	<u><b><font color="#FFFFFF" face="Verdana" size="3">Mietangebot</font></b></u></p>
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" height="85%">
  <tr>
    <td width="30" height="15%">&nbsp;</td>
    <td width="600" height="15%">
	&nbsp;<p><font color="#FFFFFF" face="Verdana" size="3">Wir bieten Ihnen vom 
	DJ-Set bis zur Line Array inklusive Personal ein breites Dienstleistungs- 
	und Technikspektrum an. </font></p>
	<p>&nbsp;<td width="30" height="15%">&nbsp;</td>
  </tr>
  <tr>
    <td width="30" height="15%">&nbsp;</td>
    <td width="600" height="15%">
	<font color="#FFFFFF">&nbsp; 
<style type="text/css">
<!--
/* Coolmenuegenerator by www.coolplace.cc */
/* keine Auflistungspunkte vor Navi-Links */
	ul, li {
		list-style-type: none;
		padding: 0px;
		margin: 0px; 
	}

/* Abstand zwischen Schrift zum Rand */
	li a {
		padding-right: 20px;
		padding-top: 5px; 
		font-family: Verdana, sans-serif;
		font-size: 14px;
	}

/* Coolmenue positionieren*/
	div.menu {
		z-index: 300;
		
		/*Wenn man das Coolmenue frei positionieren moechte, die folgenden "/*" und "* /" entfernen. Dann die Werte bei "top" und "left" anpassen.*/ 
		
		/*position:absolute;
		top:100px;
		left:200px;*/
	}

/* Aussehen der Menuepunkte einstellen */
	.menu a {
		border: none;
		background-color: #000000;
		background-image: url();
		text-decoration: none;
		text-align: center;
		font-weight: bold;
		cursor: pointer;
		margin: 0px;
		display: block;
		height: 20px;
		color: #FF0000; 
	}

/* Aussehen der Menuepunkte beim Hover Effekt */
	.menu a:hover {
		background-color: #000000;
		background-image: url();
		color: #FFFFFF; 
	}

/* Breite der Menuepunkte einstellen */
	.menu li {
		width: 100px;
		float: left; 
		overflow:hidden;
	}

	.submenue {
		font-size: 14px;
		display: none;
		width: 100px;
		float: left; 
	}

	.submenue a {
		font-weight: bold;
		font-size: 11px;
		padding-top: 5px;
		cursor: pointer;
	    color: #FF0000;
	    background-color: #000000;
		background-image: url(); 
	}

	.submenue a:hover {
	color: #FFFFFF;
	background-color: #000000;
    background-image: url();
	}
//-->
</style>
<script type="text/javascript">
<!--
function cool(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function coolout(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li>
<p align="center"><a href="javascript:void(0);" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">
Audio</a>
<ul class="submenue" id="submenu0" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">
<li>
<p align="center"><a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Audio/di.htm">
DI, FX, EQ's</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Audio/endstufen.htm">
Endstufen</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Audio/lautsprecher.htm">
Lautsprecher</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Audio/mics.htm">
Mikrofone</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Audio/mixer.htm">
Mixer</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Audio/monitore.htm">
Monitore</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Audio/pa.htm">
PA</a></li>
</ul></li>
<li>
<p align="center"><a href="javascript:void(0);" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">
Licht</a>
<ul class="submenue" id="submenu1" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">
    <li>
	<p align="center">
	<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Licht/dimmer.htm">
	Dimmer</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Licht/effekte.htm">
Effekte</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Licht/kunstlicht.htm">
Kunstlicht</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Licht/moving.htm">
Movinglights</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Licht/pulte.htm">
Pulte</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Licht/tageslichter.htm">
Tageslichter</a></li>
</ul></li>
<li>
<p align="center"><a href="javascript:void(0);" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">
Bühne</a>
<ul class="submenue" id="submenu2" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">
    <li>
	<p align="center">
	<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Bühne/buetec.htm">
	Bütec</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Bühne/deko.htm">
Deko</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Bühne/rigging.htm">
Rigging</a></li>
<li>
<p align="center">
<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Bühne/truss.htm">
Truss</a></li>
</ul></li>
<li>
<p align="center"><a href="javascript:void(0);" onmouseover="cool('submenu3');" onmouseout="coolout('submenu3');">
Trucking</a>
<ul class="submenue" id="submenu3" onmouseover="cool('submenu3');" onmouseout="coolout('submenu3');">
    <li>
	<p align="center">
	<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="kfz/kfz.htm">
	Mercedes Benz 820</a></li>
</ul></li>
<li>
<p align="center"><a href="javascript:void(0);" onmouseover="cool('submenu4');" onmouseout="coolout('submenu4');">
Pyro</a>
<ul class="submenue" id="submenu4" onmouseover="cool('submenu4');" onmouseout="coolout('submenu4');">
    <li>
	<p align="center">
	<a target="main2" onFocus="if(this.blur)this.blur()" class="menu" href="Pyro/pyro.htm">
	Pyrotechnik</a></li>
</ul></li>

</div>

    <td width="30" height="15%">&nbsp;</td>
  </tr>
  <tr align="center" valign="middle"> 
    <td width="30" height="66%">&nbsp;</td>
    <td width="600" height="66%">
	<p align="left"><font color="#FFFFFF" face="Verdana" size="3">Hier finden 
	sie eine Auswahl unseres Equipments. Unser vollständiges Mietangebot sowie 
	die Konditionen erhalten sie über den <a href="http://www.tutorials.de/forum/Kontakt/kontakt.htm">
	<font color="#FFFFFF">Kontakt</font></a>.</font></td>
    <td width="30" height="66%">&nbsp;</td>
  </tr>
  </table>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Hi,

da ist eine Positionsangabe für die Untermenüs vonnöten.

Hierfür werden die <li>-Elemente relativ positioniert, damit sich die absoluten Positionsangaben der Klasse .submenue auf die Boxengrenzen dieses Elternelement beziehen, sich darin also relativ verhalten.

Die erforderlichen Änderungen hab ich hier fett markiert:

Code: 
/* Breite der Menuepunkte einstellen */
.menu li {
width: 100px;
float: left;
/*overflow: hidden;*/ /* auskommentiert = deaktiviert, damit das Submenü in seiner Höhe nicht beschnitten wird  */
position:relative; /* relative Positionsart */
}

.submenue {
font-size: 14px;
display: none;
width: 100px;
float: left;
position:absolute; /* absolute Positionsart */
left:0; /* Startposition von links */
top:20px; /* Startposition von oben, ergibt sich aus der Höhenangabe der <a>-Elemente der ersten / oberen Menüebene */
}


mfg Maik
 
Herzlichen Dank, jetz bin ich ein bisschen schlauer und es funktioniert auch :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück