CSS Simple Frage Simple Lösung????

Comunio · 26.11.2007, 12:15

Hi Zusammen

Ich sitze zur Zeit an nem neuen Projekt mit einer horizontalen Navigation. Hiermit habe ich auch keine Probleme, nur sehe ich vor lauter Bäumen wohl den Wald nicht mehr^^

Also folgendes simples Problem

Ich habe eine Hauptnavileiste oben, wobei jede ein Drop-Down-Menü für die Unterlisten hat. Nun hätte ich gerne, dass wenn ich über hover das Untermenü öffne, der Ursprüngliche Hauptlink den Hintergrund des Untermenüs annimmt und erst wieder ändert, wenn ich das gesamte Untermenü verlasse.

Zur Zeit hovert er einfach nur rum. Sprich sobald ich mit dem Mauszeiger den Hauptlink verlasse und auf einen der im Untermenü befindlichen Links gehe, wechselt er wieder in die Ursprungsfarbe.

Kann mir vielleicht einer sagen, wie ich dieses Problem gelöst bekomme? Das muss doch was pups simples sein, oder?

Ich hoffe einer von euch kann mir da nen Anstoss geben!

Ich bedanke mich schonmal!

Rizzo · 26.11.2007, 12:26

Hallo Comunio,

da hier wohl keiner Rätselraten möchte, weil weder Code noch Link geposted wurde, gibt's auch nur die Standard-Antwort: Hilfe zur Selbsthilfe

Comunio · 26.11.2007, 12:30

Sry, aber genau darum geht es ja eben nicht, dass ich euch hier mit ewig langen Codesegmenten langweile! Ich will weder von dir einen fertigen code noch einen von dir geschriebenen, sondern mir würde einfach bereits langen, mit was man den Effekt hinbekommen kann. Um es aber deutlicher zu machen, wie es aussehen soll, hier mal nen Beispiel!
http://neu.memmingen-indians.de/

Hier denke ich kann man sehr gut sehen worum es mir geht. Der Hauptlink nimmt nach dem hovern und dem öffnen des Untermenüs die Hintergrundfarbe des Untermenüs an und behält ihn auch, wenn ich mit der Maus den Hoverbereich des Hauptlinks verlasse!

Wie gesagt, mir würde doch bereits ein Anstoss helfen, womit ich dies bewerkstelligen kann!

Rizzo · 26.11.2007, 12:36

Zitat:

Zitat von Comunio

Wie gesagt, mir würde doch bereits ein Anstoss helfen, womit ich dies bewerkstelligen kann!

Schau doch einfach in den Quelltext, dann siehst Du doch wie es gemacht ist. Der Haupt-Navi Punkt ist ein Listenelement, das Flyout ist eine Tabelle in der eine weitere Liste ist.

koenixblau · 26.11.2007, 12:42

Wenn dir der Ansatz reicht:

- http://www.cssplay.co.uk/menus/flyoutt.html
- http://www.cssplay.co.uk/menus/fly_drop.html
- http://www.cssplay.co.uk/menus/

Im weitesten Sinne:
http://www.highdots.com/css-tab-designer/

Comunio · 26.11.2007, 12:47

ja super, tasuend dank, dass sieht gut aus!!!! Ich danke vorab. Und sollte es doch noch probs geben, werd ich mal den ganzen Quelltext posten!

Aber vorab DANKE

Rizzo · 26.11.2007, 12:53

Funny... Oben poste ich dir einen Link der scheinbar nicht genehm war. koenixblau posted Links zu genau den gleichen Menüs und auf einem sind sie super?! Seeehr seltsam

(oder hab ich da gerade was falsch verstanden?)

koenixblau · 26.11.2007, 12:56

Zitat:

Zitat von Rizzo

Funny... Oben poste ich dir einen Link der scheinbar nicht genehm war. koenixblau posted Links zu genau den gleichen Menüs und auf einem sind sie super?! Seeehr seltsam

(oder hab ich da gerade was falsch verstanden?)

Achso, die vorgestellte Webseite verfügt auch über eine sehr interessante Navigation. Mit der man durch die Web-Inhalte navigieren kann.

Comunio · 26.11.2007, 13:12

Zitat:

Funny... Oben poste ich dir einen Link der scheinbar nicht genehm war. koenixblau posted Links zu genau den gleichen Menüs und auf einem sind sie super?! Seeehr seltsam (oder hab ich da gerade was falsch verstanden?)

Sry hatte den Link zu Beginn nicht als solchen gesehen, sondern als Satz interpretiert^^ sry!

Hab mir das jetzt mal im html mit meiner Version angeschaut und leider kapiere ich jetzt eben nicht, wie ich im css das so programmiere das es funzt!?

HTML-Code:

<body id="Startseite">

<div id="wrapper">


	<div id="kopfbereich">
	</div>
	
		<!--##############################################################################
		############################# Start Navigation ###################################
		##################################################################################-->
		
		<div id="navibereich">
		
		<ul id="nav">
		
		<li>
		<a  href="#">Startseite</a>
</li>
		
		
		
			
		
		
			<li>
			<a  href="#">Welpenübersicht</a>
	<ul>
	<a href="#">Die Eltern</a>
	<a href="#">Daddy Cool</a>
	<a href="#">Dana</a>
	<a href="#">Dream Casanova</a>


	</ul>
		</li>
		
	
				

	
	
	
		<li>
			<a href="">Zuchtplanung</a>
		</li>
		
		<li>
			<a href="">Zuchthunde</a>
		</li>
		
		
		
		
		
				
		
		<li id="nav5">

		<a href="#">Fotogalerie</a>
		<ul>
			<a href="#">Allgemein</a>
			<a href="#">A Wurf</a>
			<a href="#">B Wurf</a>
			<a href="#">C Wurf</a>


		
	</li>
</ul>
				
			
			
			
	

</ul>

		</div>
		

</div>






</body>

</html>

Hier nun mein css code:

Code:

/*### Festlegung von Anordnung, Größe und Positionierung der Links ###*/

#navibereich a{

padding: 0px 1px 0px 1px; /* Positionierung der Schrift im Button */
display: inline;
float:left;
width:156px; /* Einstellung der Breite der Linkbuttons */
height:35px;
text-align: center;
margin-left:3px;
margin-top:7px;
border-right: 2px solid white;
}



/*### Festlegung des Aussehens der einzelnen Links bei link und visited ###*/

#navibereich li a:link,
#navibereich li a:visited {
font-weight: bold;
color:white; /* Textfarbe auf den Buttons */
}


#navibereich li a:hover, #navibereich li a:focus {
background-image:url(Navigation/Button2.jpg);
color: #FFBB68;/* Schriftfarbe */
}


 
/*############################################################################

                          NAVIBEREICH: Erstes UNTERMENÜ (Unsere Welpen)

############################################################################*/




a {
	text-decoration: none;

}







h1 {
	text-align: center;
	padding: 0 0 0.25em 0;
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}



#nav a {
	font-weight: bold;
}


#nav a {
	text-decoration: none;
}






li {
	float: left;
	position: relative;
	width: 10.0em;			 /* Abstand der Links*/
	text-align: center;
	cursor: default;
	z-index:5; /* Legt fest das die Hauptmenüs über den Untermenüs liegen*/
}


li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index:5;
	font-weight: normal;
	background-image:none;
	}





li>ul {
	top: 36px;
	left: auto;
	z-index:5;
	
}



	li:hover ul, li.over ul {
	display: block;
	z-index:5;
	}


/* Größe Untermenü*/
#navibereich ul li ul {
width:250px;
height:120px;
border:none;
background-image:url(Hintergrund/umenu.jpg)
}

/* Linkformatierung im Untermenü*/
#navibereich ul li ul a{
width:150px;
height:20px;
border:none;
}

Sry aber ich dachte ich bekomme das irgendwie hin, daher ist der code nun auch entsprechend zerrupft! Wäre echt nett, wenn mir wer von euch sagen könnte, wie ich nun die Ansteuerung vornehmen kann, damit bei hover alles nen selben Hintergrund bekommt!

Ich blicke es echt nicht!

Comunio · 26.11.2007, 13:48

Habs gelöst^^ Trotzdem danke für die Links!