DropDown Menu Unterpunkte mit anderem Aussehen

[_SimonSez_]

Hallo Zusammen,

kann mir vielleicht jemand bei folgendem Problem helfen?
Ich möchte das meine Unterpunkte im Menü ein anderes Aussehen haben als die Hauptpunkte wenn man sie angeklickt hat.

Im moment ist es so, das wenn ich den Hauptpunkt anklicke, die Unterpunkte das selbe Layout bekommen. (Sehen aus, als wären Sie angekickt)

Hier mein bisheriger Code:

.menu	  		{ font-family:verdana, helvetica, arial, sans-serif; width:800px; height:32px; position:relative; margin:0; background:url(../img/button.jpg) repeat-x; 
				  float:left; text-align:center; }
.menu ul		{ height:32px; list-style:none; margin:0; padding:0; }
.menu li		{ float:left; padding:0px; width:95px; }
.menu li a		{ background:url(../img/button.jpg) repeat-x; color:#cccccc; display:block; font-weight:normal; line-height:32px; margin:0px; padding:0px; 
				  text-align:center; text-decoration:none; border-right:1px solid #3d3d3d; }

.menu li a:hover, .menu ul li:hover a	{ background:url(../img/button-hover.jpg) repeat-x; color:#FFFFFF; text-decoration:none; }
.menu li ul								{ background:#b20d0d; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:95px; z-index:200; }
.menu li:hover ul						{ display:block; }
.menu li li 							{ background:url(../img/sub_sep.gif) bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:95px; }
.menu li:hover li a						{ background:none; }
.menu li ul a							{ display:block; height:32px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; }
.menu li ul a:hover, .menu li ul li:hover a { background:#2580a2 url(../img/hover_sub.gif) center left no-repeat; border:0px; color:#ffffff; text-decoration:none; }
.menu p			{ clear:left; }
.menu #currentpage a	{ text-decoration:none; color:#ffffff; background:url(../img/button-hover.jpg) repeat-x; }

Danke und Gruß
Simon

 

[_SimonSez_]

Kann mir jemand helfen?

 

[Dockmodus]

Kann mir jemand helfen?

Hilf dir einfach selbst, indem du einen spezifischeren Selektor für die Unterpunkte definierst, denn deine existerenden gelten in ihrer Form bis in die unterste deiner Menüebenen.

 

[_SimonSez_]

wie mach ich das?

verstehe es langsam nicht mehr. wenn ich meinen hauptpunkt anklicke wird er richtig angezeit. gehe ich dann aber mit der maus über diesen punkt und das menü fährt aus, sehen die unterpunkte auch alle angeklickt aus.

 

[_SimonSez_]

hier ist übrigens noch der aufbau meiner navigation:

<div class="menu">
  <ul>
    <li<?php if ($thisPage=="index.php") echo " id=\"currentpage\""; ?>><a href="index.php" >Punkt 1</a></li>
    <li<?php if ($thisPage=="001.php") echo " id=\"currentpage\""; ?>><a href="001.php" >Punkt 2</a></li>
    <li<?php if ($thisPage=="002.php") echo " id=\"currentpage\""; ?>><a href="002.php" >Punkt 3</a></li>
    <li<?php if ($thisPage=="003.php") echo " id=\"currentpage\""; ?>><a href="003.php" >Punkt 4</a></li>
	<li<?php if ($thisPage=="004.php") echo " id=\"currentpage\""; ?>><a href="004.php">Gallerien</a>
	  <ul>
	    <li<?php if ($thisPage=="006.php") echo " id=\"currentpage\""; ?>><a href="006.php">Gallerie 1</a></li>
		<li<?php if ($thisPage=="007.php") echo " id=\"currentpage\""; ?>><a href="007.php">Gallerie 2</a></li>
		<li<?php if ($thisPage=="008.php") echo " id=\"currentpage\""; ?>><a href="008.php">Gallerie 3</a></li>
	  </ul>
	</li>
	<li<?php if ($thisPage=="005.php") echo " id=\"currentpage\""; ?>><a href="005.php">Punkt 5</a></li>
  </ul>
</div>

 

[Auktionator]

Hilf dir einfach selbst, indem du einen spezifischeren Selektor für die Unterpunkte definierst, denn deine existerenden gelten in ihrer Form bis in die unterste deiner Menüebenen.

wie mach ich das?

In etwa so:

.menu ul li ul li a { ... }
.menu ul li:hover ul li a { ... }
.menu ul li:hover ul li:hover a { ... }

Kann doch net so schwer sein ...