Safari Dropdownfehler

Billbos

Hallo,

ich habe unter http://poure.eu/ eine Seite mit einer Dropdownnavigation erstellt. Im Firefox 3 und im Internetexplorer 7 funktioniert sie wunderbar.
Im Safari jedoch geht sie an den Seiten raus, weiß jemand Rat?

Mfg

Billbos

HTML-GURU

Zitat von Billbos

Hallo,

ich habe unter http://poure.eu/ eine Seite mit einer Dropdownnavigation erstellt. Im Firefox 3 und im Internetexplorer 7 funktioniert sie wunderbar.
Im Safari jedoch geht sie an den Seiten raus, weiß jemand Rat?

Mfg

Billbos

Du musst nach jedem Menüpunkt ein <p> setzen. Manche Browser nehmen es eben etwas genauer. Eigentlich ist es so wie es Safari macht richitg. Es ist nur ein Menü, die Richting davon ist aber nicht vorgeben <li> / </li> heißt nur das es Meünpunkte sind, die einfach nebeneinader liegen. <p> macht dagegen einen Absatz und sagt Dem Browser das er den nächsten Menüpunkt in eine neue Zeile nach dem vorherigen Menüpunkt erstellen soll.

Hier ich habe es dir mal überall gemach brauchst den Code nur noch mit deinem zu ersetzen.

HTML

<!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>Oswald von Nell-Breunig-Schule R&ouml;dermark</title>


<link rel="stylesheet" type="text/css" href="http://poure.eu/css/layout.css" />
<link rel="stylesheet" type="text/css" href="http://poure.eu/css/navigation.css" />


<!-- Navigation-Top -->
<script type="text/javascript">
/* <![CDATA[ */
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById('navigation');
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;


/* ]]> */
</script>
<!-- Navigation-Top -->




</head>


<body>


<!-- ************************************************************* Wrapper ************************************************************ -->
<div id="wrapper">
 <!-- ************************************************************* Header ************************************************************ -->
 <div id="header">
  <div class="logo"><a href="http://poure.eu/index.html"></a></div>
  <div class="banner"><img src="http://poure.eu/rohdatein/flash/platzhalter/platzhalter.png" width="600" height="150" alt="Nell-Breuning-Schule Platzhalter" /></div>
 </div>
  <!-- ********************************************************** Navigation - Top  *************************************************** -->


  <ul id="navigation">
   <li><a href="index.html">Home</a></li>
   <li>Nell-Breuning
      <ul>


         <li><a href="#">Namensgeber </a></li><p>
         <li><a href="#">Schule </a></li><p>
         <li><a href="#">Leistungen </a></li><p>


         <li><a href="#">Entwicklung </a></li><p>
      </ul>
   </li>
   <li>Men&uuml;punkt
      <ul>


         <li><a href="#">Unterpunkt </a></li><p>
         <li><a href="#">Unterpunkt </a></li><p>


         <li><a href="#">Unterpunkt </a></li><p>
         <li><a href="#">Unterpunkt </a></li><p>
      </ul>
   </li>
   <li>Men&uuml;punkt
      <ul>


         <li><a href="#">Unterpunkt </a></li><p>


         <li><a href="#">Unterpunkt </a></li><p>
         <li><a href="#">Unterpunkt </a></li><p>
         <li><a href="#">Unterpunkt </a></li><p>
      </ul>
   </li>
   <li>Men&uuml;punkt
      <ul>


         <li><a href="#">Unterpunkt </a></li><p>
         <li><a href="#">Unterpunkt </a></li><p>
         <li><a href="#">Unterpunkt </a></li><p>
         <li><a href="#">Unterpunkt </a></li><p>
      </ul>
   </li>


</ul>
   <!-- ************************************************************* Navigation - Left *********************************************** -->
   <div id="navileft"></div>
    <!-- ************************************************************* Container ****************************************************** -->
    <div id="container"></div>
   <!-- ************************************************************* Footer ************************************************************ -->
   <div id="footer"></div>
  <!-- ********************************************************* Navigation - Bottom  *************************************************** -->
  <div id="navibottom"></div>


</div>
<!-- END Wrapper -->




</body>
</html>

Alles anzeigen

Billbos

Es wurde nicht mehr vertikal, sondern horizontal wiedergespeigelt, die Dropdownnavigation.
Ich habe das Problem unbemerkt selber gelöst aber danke für deine Antwort!

HTML-GURU

Zitat von Billbos

Es wurde nicht mehr vertikal, sondern horizontal wiedergespeigelt, die Dropdownnavigation.
Ich habe das Problem unbemerkt selber gelöst aber danke für deine Antwort!

Ich habe meine Antwort noch mal editiert jetzt müsste es bei dir klappen.
Aber wenn du es bereits gemerkt hast, okay.

Tags