Problem bei Listenpopup-Menü in Firefox

Status
Nicht offen für weitere Antworten.

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich hab mir mal das Popup Menü von http://www.htmldog.com/articles/suckerfish/dropdowns/ nachgebaut. Eigentlich sollte dieses Menü doch Crossbrowser fähig sein nur im Firefox wird die ganze Liste bei mir zusammen geschoben:

Code:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Herzlich willkommen auf www.janstieler.de</title>
<meta name="author" content="Jan-Frederik Stieler">
<meta name="generator" content="Phase 5">
<!-- grundlegende Seiteneinstellungen -->
<link rel="stylesheet" type="text/css" href="css/basics.css">
<link rel="stylesheet" type="text/css" href="css/menue.css" >
<link rel="stylesheet" type="text/css" href="css/menue_mitte.css" >
<script type="text/javascript" src="js/menue_oben.js"></script>
<script type="text/javascript" src="js/basics.js"></script>
</head>
<body class="body">
<div id="container">
<div class="ro">
  <div class="lo">
    <div class="ru">
      <div class="lu">
         <div id="inhalts_div">
<div><a href="#" id="home">www.janstieler.de</a></div>
<!-- Unterteilungslinie Head/Content -->
<div id="linie"></div>
<!-- menü -->
<ul id="nav">
 	<!-- hauptmenüstruktur -->
        	<li><a href="#">Arbeiten</a>
                 <!-- 1submenü -->
                 <ul>
			<li><a href="#">Print</a></li>
                         <ul>
                 	<li><a href="golfbox.html">Golfbox</a>
			<li><a href="smc.html">SMC Programmheft</a>
                         <li><a href="inflammble.html">Inflammble 2006</a> 
                         </ul>
                         <li><a href="#">Nonprint</a></li>
                 </ul>
	</li>

	<li><a href="#">Portfolio</a>
		<ul>
			<li><a href="#">Portfolio1</a></li>
			<li><a href="#">Portfolio2</a></li>
      			<!-- 2submenü -->
		        <ul>
                 	<li><a href="#">Platzhalter</a>
			<li><a href="#">Platzhalter</a>
                         </ul>
                         <li><a href="#">Portfolio3</a>
                         </li>
		</ul>
	</li>
	<li><a href="#">Tutorials</a>
		<ul>
			<li><a href="#">Tutorials1</a></li>
			<li><a href="#">Tutorials2</a></li>
			<li><a href="#">Tutorials3</a></li>
         		<li><a href="#">Tutorials4</a></li>
                         <li><a href="#">Tutorials5</a></li>
                 </ul>
	</li>

</ul>
<!--menü ende -->
	  <div id="kontakt_impressum" align="center" class="txtweiss"><a href="kontakt_impressum.html" class="verlinkt">Kontakt&nbsp;|&nbsp;Impressum</a></div>
         </div>
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>
Code:
#nav  { /* all lists */
         text-decoration:none;
       	text-align:center;
	position: absolute;
         top:42px;
         left:13px;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 20px;
         z-index:2;
}

#nav ul{	padding: 0px;
	margin: 0px;
	list-style: none;
	line-height: 20px;
         }

#nav a { font-family: verdana, helvetica, arial, sans-serif;
         font-size: 9pt;
	text-decoration:none;
	display: block;
	width: 150px;
}


#nav li { /* all list items */
	float: left;
	width: 0px; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #ffffff;
	border:2px solid #cccccc;
         border-top;2px solid #ffffff;
	width: 150px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
         z-index:3;
}

#nav li ul ul { /* third-and-above-level lists */
         position: absolute;
	background: #ffffff;
	border:2px solid #cccccc;
         border-left;2px solid #ffffff;
	margin: -22px 0px 0 150px;
         z-index:4;
}
.ueberstehend { /* third-and-above-level lists */
         position: absolute;
	background: #ffffff;
	border:2px solid #cccccc;
	margin: -22px 0px 0 150px;
         z-index:4;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
          left: auto;
}

Hatt einer eine Idee was ich falsch gemacht habe?
Irgendwie funktioniert bei mir immer das geschriebene Zeugs im IE und nicht im Firefox, also genau anderst herrum als bei den anderen, kann mir das vielleicht mal einer erklären? Also mich wundert das ehrlich gesagt schon ein wenig.

Viele Grüße
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.
Zurück