nicht angemeldet
Hallo liebe Leute,
ich hoffe ihr könnt mir helfen, ich bin schon seit mehreren Tagen dran
eine hor Navi aus css zu bauen.
Die navi selbst funktioniert mitlerweile, aber was nicht funktioniert ist der bei css auskomentierter Teil :~~~css
#navi_top li ul#aktuell1, #navi_top li ul#aktuell1 li ul#aktuell2{
left:0px;
}
Er dient dazu, die aktuelle Seite(auf der man sich befindet) im Navi anzuzeigen. Wenn man die reinstellet (die kommentare wegnimmt) dann sieht man von anfang an wo man ist (ein teil des Baums ist angezeigt) aber
wie ihr sehen könnt, beim Mouseover auf die anderen Punkte bleibt dieser Teil stehen, und wird überlappt.
Wie kann man das so hinkriegen, dass bei Mouseover auf die anderen Punkte dieser Teil verschwindet, und bei Mouseout wiederrum zurückkehrt?
Hier der Code:
~~~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>Untitled Document</title>
<style>
body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.main{
width:1000px;
height:727px;
border:1px;
border-style:solid;
background-repeat:no-repeat;
padding-top:1px;
padding-left:1px;
position: relative;
}
.navi {
background-repeat:repeat-x;
color:#FFFFFF;
text-transform:uppercase;
font-weight:bold;
text-indent:20px;
height:60px;
width:998px;
margin-bottom:1px;
background-color: #CCCCCC;
}
.navi a, .navi a:visited, .navi a:link, .navi a:active {
text-decoration:none;
color:#000000;
}
.navi a:hover{
color:#336699;
}
#navi_top, #navi_top ul {
margin:0; padding:0;
float:left;
list-style:none;
height:17px;
padding-top:3px;
word-spacing:10px;
}
#navi_top li {
float:left;
padding:0;
}
#navi_top ul {
float:left;
list-style:none;
margin:0px 0 0 0px;
padding:6px 0 0 0;
position:absolute;
left:-1000px;
width:100%;
border:0;
}
#navi_top li li {
float:left;
list-style:none;
}
#navi_top li ul ul {
padding:6px 0 0 0;
margin:0;
}
#navi_top li:hover ul ul, #navi_top li:hover ul ul ul, #navi_top li:hover ul ul ul ul, #navi_top li.sfhover ul ul, #navi_top li.sfhover ul ul ul, #navi_top li.sfhover ul ul ul ul {
left:-3000px;
}
#navi_top li:hover ul, #navi_top li li:hover ul, #navi_top li li li:hover ul, #navi_top li li li li:hover ul, #navi_top li.sfhover ul, #navi_top li li.sfhover ul, #navi_top li li li.sfhover ul, #navi_top li li li li.sfhover ul {
left:0px;
}
/*#navi_top li ul#aktuell1, #navi_top li ul#aktuell1 li ul#aktuell2{
left:0px;
}*/
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
mcAccessible = function() {
var mcEls = document.getElementById("suckerfishnav").getElementsByTagName("A");
for (var i=0; i<mcEls.length; i++) {
mcEls[i].onfocus=function() {
this.className+=(this.className.length>0? " ": "") + "sffocus"; //a:focus
this.parentNode.className+=(this.parentNode.className.length>0? " ": "") + "sfhover"; //li < a:focus
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < a:focus
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < ul < li < a:focus
}
}
}
mcEls[i].onblur=function() {
this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), "");
this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
}
}
// only ie needs the sfHover script. all need the accessibility script...
// thanks http://www.brothercake.com/site/resources/scripts/onload/
if(window.addEventListener) window.addEventListener('load', mcAccessible, false); // gecko, safari, konqueror and standard
else if(document.addEventListener) document.addEventListener('load', mcAccessible, false); // opera 7
else if(window.attachEvent) { // win/ie
window.attachEvent('onload', sfHover);
window.attachEvent('onload', mcAccessible);
} else { // mac/ie5
if(typeof window.onload == 'function') {
var existing = onload;
window.onload = function() {
existing();
sfHover();
mcAccessible();
}
} else {
window.onload = function() {
sfHover();
mcAccessible();
}
}
}
//--><!]]>
</script>
<!--[if lte IE 7]>
<script type="text/javascript" >
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("suckerfishnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]>
</script>
<![endif]-->
</head>
<body><center><br />
<br />
<div class="main">
<div class="navi">
<ul id="navi_top" >
<li><a href="2.html" >asdasdf</a> |<br />
<ul id="aktuell1">
<li><a href="#" >ndasbau</a> |<br />
<ul id="aktuell2">
<li><a href="#" >dsapwdasdads</a> | <a href="#" >spdasder</a> | <a href="#" >dsasddasd</a> | <a href="#" >sdasdasdsacr</a> | <a href="#" >dasdasd</a></li>
</ul>
</li>
<li><a href="#" >dasdas</a> |</li>
<li><a href="#">asdas</a> |<br />
<ul>
<li><a href="#" >erdasdang</a> | <a href="#" >nacdsadsang</a></li>
</ul>
</li>
<li><a href="#">dsaten</a> |<br />
<ul>
<li id="lil2_3"><a href="#" >carbon rodkicker</a> | <a href="#" >high aspect kiele</a> | <a href="#" >einldasdasem</a> | <a href="#" >dsystem</a> | <a href="#" >Adasffa</a> | <a href="#" >dasdasdad</a></li>
</ul>
</li>
<li><a href="#" >dasd</a></li>
</ul>
</li>
<li><a href="#" >dasdasdas</a> |<br />
<ul>
<li id="lil1_2"><a href="#" >aluminium</a> | <a href="#" >kohlefaser</a></li>
</ul>
</li>
<li><a href="#">dasdas</a> |<br />
<ul>
<li id="lil1_3"><a href="#" >dsaeteile</a> | <a href="#" >architdl</a> | <a href="#" >messebau</a> | <a href="#" >leitsysteme</a></li>
</ul>
</li>
<li><a href="#" onmouseover="lvl1(4)">dasdasd</a><br />
<ul>
<li id="lil1_4"><a href="#" >philosophie/team</a> | <a href="#" >news</a> | <a href="#" >presse</a> | <a href="#" >winterlager</a> | <a href="#" >gebrauchtboote</a> | <a href="#" >anfahrt</a></li>
</ul>
</li>
</ul>
</div>
</div>
</center>
</body>
</html>
DANKE VIELMALS im VORAUS
Grüsse - Mischa