✔ Navigationsmenü-Problem

Status
Nicht offen für weitere Antworten.
Denniz

Denniz

Erfahrenes Mitglied
Hallo Leute,

ich habe mir ein horizontales Menu gebaut, welches unter einigen Punkten weitere sublinks enthält. Das Menu besteht nur aus Grafiken.
Beim hovern übern die Hauptmenupunkte wird die Grafik gewechselt und es kommt zusätzlich ein kleiner Strich als Designelement zum Vorschein.
Soweit geht alles.

Nun zum Prob.:
Sobald ich in der Navi auf die sublinks hover, springt die Grafik der oberen Leiste zurück so das die hovergrafik mit dem strich nicht mehr sichtbar ist.

Ist es irgendwie möglich, dass wenn man auf die sublinks geht, trotzdem weiterhin der Hauptlink mit der Strichgrafik sichtbar bleibt?

Vielleicht kann sich einer meine CSS ansehen und mir sagen, ob es möglich ist, dass die gehoverte Grafik mit dem Strich sichtbar bleiben kann solange man sich über die sublinks befindet.

Ich habe mal die Zustände grafisch hinterlegt. -link-

Zu 1. So soll die Navi am Anfang aussehen
Zu 2a: Wenn man auf link2 hovert, kommen das Designelement ( Strich) sowie die sublinks zum Vorschein
Zu 2b+c: Beim hovern der sublinks wird die schrift in rot dargestellt und beim link2 bleibt die Grafik mit dem Strich sichtbar.
Zu 3: Das ist der Zustand für link3


Hier eine bsp. Navi die ich bislang in CSS umgesetzt habe vielleicht kann mir einer dabei weiterhelfen:-link-

Beste Grüße
 
Zuletzt bearbeitet:
Hi Denniz,

ohne jetzt genauer geschaut zu haben würde ich mal folgendes vermuten.
Du hoverst für den Grafikaustausch immer nur das <a>. Das umfasst aber nicht die Unterpunkte. Nur das <li> umfasst diese. Wenn du den Hover zu so etwas ändert: "li:hover a", und "li:hover li a:hover" oder "li:hover li:hover a" sollte es klappen.
Das kann der IE normalerweise nicht, aber dafür bindest du ja bereits die "csshover.htc" ein. Damit klappts auch mit dem IE.

Hoffe das war verständlich genug.

Gruss, Hannes
 
Ich komme auf eine Wartungsseite wenn ich deinen Links folge. Parse doch mal bitte hier das Stylesheet und den HTML-Code.
 
Hi,

wofür der Browsercache doch gut sein kann ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
body { /*--- für den IE----*/
	behavior:url("csshover.htc"); }

ul#navigation { list-style-type: none; padding: 0; margin: 0px 0 0 0px; border: 0; top: 0px; left: 0px; width: 200px; height: 27px; background: #4f596a url(navigation_over.gif) no-repeat; }

/*<group=level 1>*/
ul#navigation li { padding: 0; margin: 0; display: block; float: left; text-indent: -9999px; }
ul#navigation li a { border: 0; display: block; height: 27px; background: url(navigation.gif) no-repeat; outline:none; }
ul#navigation li a:hover { border: 0; display: block; background-image: url(navigation_over.gif); }

/*<group=level 1 ids>*/
li#link1 a { width: 75px; }
li#link2 a { width: 50px; }
li#link2 a:link,
li#link2 a:visited,
li#link2 a:hover { background-position: -75px 0px; }

/*<group=level 2>*/
#navigation li ul { display: block; visibility: hidden; position: absolute; left: 0px; width: 200px; margin: 0; }
#navigation li:hover ul { visibility: visible; z-index: 100; }
#navigation li#link2 ul { background: none; height: 21px; margin-left: 40px; }
* html #navigation li#link2 ul { margin-left: 85px; }


/*<group=level 2 ids>*/
ul#navigation li#link2 ul li#sublink1 a:link, 
ul#navigation li#link2 ul li#sublink1 a:visited { width: 62px; height: 21px; background: url(navigation_sublinks.gif) no-repeat 0px 0px; }
ul#navigation li#link2 ul li#sublink1 a:hover { width: 62px; height: 21px; background: url(navigation_sublinks.gif) no-repeat 0px -21px; }
ul#navigation li#link2 ul li#sublink2 a:link,
ul#navigation li#link2 ul li#sublink2 a:visited { width: 62px; height: 21px; background: url(navigation_sublinks.gif) no-repeat -62px 0px; }
ul#navigation li#link2 ul li#sublink2 a:hover { width: 62px; height: 21px; background: url(navigation_sublinks.gif) no-repeat -62px -21px; }
</style>
</head>
<body>
<ul id="navigation">
  <li id="link1" ><a href="#">link1</a></li>
  <li id="link2" ><a href="#" >link2</a>

    <ul>
      <li id="sublink1" ><a href="#">sublink1</a></li>
      <li id="sublink2" ><a href="#">sublink2</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
 
Hi!

So, ich habe heute Morgen endlich Zeit gehabt, mir den CSS-Code in aller Ruhe anzuschauen ;)

Schreibe den Selektor:

Code: 
/*<group=level 1>*/

ul#navigation li a:hover { border: 0; display: block; background-image: url(navigation_over.gif); }
folgendermaßen um:

Code: 
/*<group=level 1>*/

ul#navigation li:hover a { border: 0; display: block; background-image: url(navigation_over.gif); }
und die hover-Grafik bleibt im oberen Link erhalten, wenn du mit der Maus auf die Sublinks gehst.
 
Einfach wieder mal Perfekt.
Genau so probiere ich's schon seit 3 tagen zu coden. :)

Vielen Dank,
Denniz
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück