Ich habe folgendes problem:
Ich möchte eine Navigation machen, in der ein bereich eine unterkategorie (drop-down) enthält.
Habe mir ausm Netz das wichtigste rausgesucht. Funktioniert jetzt auch endlich, nach Tagen. Bis auf ein Problem. Fährt man mit der maus über das drop-down menü ist der hover bereich an der linken und rechten seite zu groß, und man kann die anderen navi links nicht errreichen...
Hier mal Quelltext:
<!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>
<title></title>
<meta name="author" content="" />
<link rel="stylesheet" href="stylesliste.css"></link>
<script type="JavaScript">
<!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>
<style type="text/css">
<!--
#nav, #nav ul {padding: 0; margin: 0; list-style:none;}
#nav a { display: block;}
#nav li { float: left;}
#nav li ul { position: absolute; display:none;}
#nav li:hover ul {display:block;}
#nav li:hover ul, #nav li.sfhover ul {display:block;}
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div class="navi">
<ul id="nav">
<li class="home"><a href="#"></a>
</li>
<li class="fotos"><a href="#"></a>
</li>
<li>
<div class="arbeiten"><a href="#"></a></div>
<ul>
<li class="foto"><a href="#"></a></li>
<li class="grafik"><a href="#"></a></li>
<li class="web"><a href="#"></a></li>
</ul>
</li>
<li class="impressum"><a href="#"></a>
</li>
</ul>
</div>
</body>
</html>
Das Problem behebt sich jedoch wenn man den kleinen Teil ändert:
<li><div class="arbeiten"><a href="#"></a></div> würde zu
<li class="arbeiten"><a href="#"></a> werden.
Ist eigentlich besser jedoch funktioniert dann das ganze drop-down nicht mehr, man sieht dann nur einen link, aber der enthält dann das bild von der Oberkategorie. ( Okay, das war nicht wirklich verständlich. )
Bin am verzweifeln :'(
Da ich nicht weiß, ob das CSS auch von Bedeutung ist, ist die ganze seite unter:
zu erreichen.
Ich hoffe, dass mir jemand weiterhelfen kann, bin seit tagen damit beschäftigt und langsam bin ich am ausflippen.
LG
Ich möchte eine Navigation machen, in der ein bereich eine unterkategorie (drop-down) enthält.
Habe mir ausm Netz das wichtigste rausgesucht. Funktioniert jetzt auch endlich, nach Tagen. Bis auf ein Problem. Fährt man mit der maus über das drop-down menü ist der hover bereich an der linken und rechten seite zu groß, und man kann die anderen navi links nicht errreichen...
Hier mal Quelltext:
<!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>
<title></title>
<meta name="author" content="" />
<link rel="stylesheet" href="stylesliste.css"></link>
<script type="JavaScript">
<!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>
<style type="text/css">
<!--
#nav, #nav ul {padding: 0; margin: 0; list-style:none;}
#nav a { display: block;}
#nav li { float: left;}
#nav li ul { position: absolute; display:none;}
#nav li:hover ul {display:block;}
#nav li:hover ul, #nav li.sfhover ul {display:block;}
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div class="navi">
<ul id="nav">
<li class="home"><a href="#"></a>
</li>
<li class="fotos"><a href="#"></a>
</li>
<li>
<div class="arbeiten"><a href="#"></a></div>
<ul>
<li class="foto"><a href="#"></a></li>
<li class="grafik"><a href="#"></a></li>
<li class="web"><a href="#"></a></li>
</ul>
</li>
<li class="impressum"><a href="#"></a>
</li>
</ul>
</div>
</body>
</html>
Das Problem behebt sich jedoch wenn man den kleinen Teil ändert:
<li><div class="arbeiten"><a href="#"></a></div> würde zu
<li class="arbeiten"><a href="#"></a> werden.
Ist eigentlich besser jedoch funktioniert dann das ganze drop-down nicht mehr, man sieht dann nur einen link, aber der enthält dann das bild von der Oberkategorie. ( Okay, das war nicht wirklich verständlich. )
Bin am verzweifeln :'(
Da ich nicht weiß, ob das CSS auch von Bedeutung ist, ist die ganze seite unter:
zu erreichen.
Ich hoffe, dass mir jemand weiterhelfen kann, bin seit tagen damit beschäftigt und langsam bin ich am ausflippen.
LG