Navi Horizontal belibt nicht stehen

[strubel]

Ciao Leute,

so ein v......... D....

Jetzt sitz ich schon über zwei Tage an so einem Menü. Klappt soweit das das Menü aufgeht auch alles wunderbar. Man staune sogar im ie. Nun ist es aber so das wenn man die Hauptnavi verlässt, die Schrift wieder rot wird anstatt weiss zu bleiben wie beim roll over. Bitte Bitte helft mir weiter....

Hier mal das entsprechende CSS für die Navi:

@charset "UTF-8";
/* CSS Document
Autor:		nico.schweizer@miux.ch
Datum:		20.03.2008
Version:	1.0

Frohe Ostern */

/* Hauptnavinavi */

.navigation {
	width: 965px;
	height: 25px;
	float: left;
	position: relative;
	text-align:left;
	vertical-align: bottom;
	line-height: 25px;
	z-index: 1002;
}


/*
Beginn Subnavi
*/

#sfnav, #sfnav ul {
	list-style: none;
	line-height: 1;
	background: #EAEDE6;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	position: absolute;
	height: 25px;
	z-index: 1002;
	width: 965px;
	border-top: 1px solid black;
}

#sfnav a {
	display: block;
	color: #511133;
	text-decoration: none;
	padding: 0px;
	text-align: center;
	line-height: 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#sfnav a.daddy {
text-align: left;
color: #acc424;
padding-left: 5px;
background-color: #511133;
}

#sfnav li {
float: left;
padding: 0;
}


#sfnav li ul {
			position: absolute;
			left: -999em;
		width: 991px;
height: auto;
font-weight: normal;
margin: 0;
width: 191px;
background-color: #511133;
}

#sfnav li li {
		width: 191px;
}

#sfnav li ul ul {
		margin: -1.5em 0 0 194px;
}

#sfnav li:hover ul ul, #sfnav li:hover ul ul ul,
#nav3 .navfxenabled li:hover ul, #nav3 .navfxenabled li:hover ul ul, #nav3 .navfxenabled li:hover ul ul ul,
#nav3 .navfxenabled li.over ul ul,#nav3 .navfxenabled li.over ul ul ul
{
			left: -999em;
}
#sfnav li:hover ul,
#nav3 .navfxenabled li.over ul
 {
			left: auto;
}
#sfnav li li:hover ul, #sfnav li li li:hover ul,

/*Navi*/
#nav3 .navfxenabled li li.over ul, #nav3 .navfxenabled li li li.over ul
 {
			left: 0px;
}
#nav3 li li.over ul.leftover, #nav3 .navfxenabled li li li.over ul.leftover, #nav3 .navfxenabled li li li li.over ul.leftover
 {
			left: 191px;
}
#nav3 #sfnav li.over,#sfnav li:hover {
	/*background: #EAEDE6;*/
	background: #511133;
	color: #FFF;
	width: 191px;
}
#nav3 a:hover{
	background: #511133;
	color: #FFF;
	margin: 0px;
	padding-left: 5px;
}

und hier nen link zur testseite:

http://www.miux.ch/projekte/zuber/

Gruss und Danke schon einmal in Hoffnung.
Strubel

 

[roterhusar]

hallo strubel

tolle navigation!

super Mitgliedsfoto!

wenn ich das richtig verstanden habe, soll die schrift beim verlassen die farbe wechseln. hab ich schon mal was gemacht, mit eventhandler....dingsda?!?, -- javascripte. onmouseout hieß das. extrem kompliziert.

horidoo grüßt gerd

 

[strubel]

tolle navigation!

super Mitgliedsfoto!

wenn ich das richtig verstanden habe, soll die schrift beim verlassen die farbe wechseln. hab ich schon mal was gemacht, mit eventhandler....dingsda?!?, -- javascripte. onmouseout hieß das. extrem kompliziert.

horidoo grüßt gerd

Hoi Gerd,

danke für Deine Komplimente ;-)
Habe eine Lösung gefunden, wenn jemand interressiert ist, dann kann er mich gerne kontaktieren.

Gruss Strubel
PS: Hm evtl. sollte ich doch mal das Bild ändern, damit ich mehr antworten bekomme. Irgendwas mit scharfen kurven und blonden Haaren oder so...

 

[roterhusar]

rüberwachsen lassen

im navibereich gibts ja mitlerweile äußerst filigrane beispiele.
wenn du da etwas funktionierendes hast, leg es auf, vielleicht sucht grade jemand danach. Ich brauche eine Navi für meine onlinezeitung.
Das Foto musst du unbedingt lassen. Immerhin hast du 82 Zugriffe. ist auch nicht ohne!

grüßt Gerd

 

[strubel]

Da isses:

CSS

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 965px; /*For KHTML*/
  list-style: none;
  height: 25px;
}

#subnav
{
  background:#511133;
}

ul#navmenu-h li {
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 20px;
}

.daddy
{
	padding-left:10px;
}

.endNav
{
	width:192px;
}

* html .endNav {
  w\idth:193px;
}

.nav
{
	width:193px;
	font: bold 12px Arial, Helvetica, sans-serif;
}

ul#navmenu-h ul {
  margin: 0;
  border: none;
  padding: 0;
  width: 193px;
  list-style: none;
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 193px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h a {
  margin: 0;
  border: none;
  padding: 0;
  height:25px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EAEDE6;
  border-left:1px solid #000000;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
  width:100%;
  color: #511133;
  font: 12px Arial, Verdana, Helvetica, sans-serif;
  line-height: 25px;
  font-weight: bold;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  margin: 0;
  border: none;
  padding: 0;
  border-left:1px solid #000000;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
  background: #511133;
  color: #EAEDE6;
  font: Arial, Helvetica, sans-serif bold 12px;
  line-height: 25px;

}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  padding: 0;
  margin: 0;
  border: 0;
  float: none;
  background: #511133;
  color: #acc424;
  font: Arial, Helvetica, sans-serif bold 12px;

}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  margin: 0;
  border: none;
  padding: 0;
  color: #EAEDE6;
  font: Arial, Helvetica, sans-serif bold 12px;

}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  margin: 0;
  border: none;
  padding: 0;
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  margin: 0;
  border: none;
  padding: 0;
  background: #CCC;
  color: #EAEDE6;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
  margin: 0;
  border: none;
  padding: 0;
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  margin: 0;
  border: none;
  padding: 0;
  background: #CCC;
  color: #EAEDE6;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  margin: 0;
  border: none;
  padding: 0;
  display: none;
  position: absolute;
  top: 0;
  left: 193px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}

so und dann java:

navHover = function() {
	var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
	for (var i=0; i<lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

Grüsse Nico
ps: danke für deine schmeicheleien gerd, bin aber schon vergeben. ;-)