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.
<!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ö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ü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ü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ü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