Zum Inhalt springen

Menü mit mehreren Farben

Erstellt am 22. Mai 2011 · Noch keine Antworten

Tags: HTML & CSS, Frage

andibey ·

Hallo,

ich plane ein Menü, indem jeder Menüpunkt eine eigenständige Farbe besitzt, sowie beim hovern per CSS die Subnavi Punkte in exakt der gleichen Farbe wie der Menüpunkt dargestellt werden sollen.

Derzeit sieht es wie auf dem Bild aus.

ich hätte es gerne so, dass der Punkt Aktuelles in Grün ist, und der Link, sowie die CSS Subnavi nur von "Aktuelles" auch in Grün erscheinen. Leider weiß ich nicht wie ich das angehen soll.

TS vom Menü:

page.10.marks.MENU {


special = list
special.value = 2,4,5,6,7,8,9
1 = TMENU
1 {


wrap = <ul class="menu"> | </ul>
expAll = 1


NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)"> | </li> 



ACT < .NO

ACT = 1

ACT.ATagParams = class="active"

}





2 < .1
3 < .1
4 < .1
}
lib.container < temp.menu

CSS:

ul.menu, ul.menu ul {
	margin-top:3px;
    list-style-type: none;

}



ul.menu a {

    display:block;
	font-size:14px;
    padding: 4px 40px 0px 0px;

   font-weight:normal; 

}



ul.menu ul a {
   padding: 0 10px;
	font-size:12px;
	color: #ffffff;
	text-decoration:none;
}
ul.menu ul a:hover {
	padding: 0 10px;
	font-size:12px;
	color: #ffffff;
	text-decoration:underline;
}



ul.menu li {

    padding:0 30 0 0; 
    margin:0;
    float:left;



}



ul.menu ul {
	margin-top:0px;
    margin-left:0;
	padding: 5px 0 3px 0;

    position: absolute;

    background-color: #ff7f24;
	
	opacity: 0.9;

    border:1px solid #ffffff;

    display:none;

    width:auto;
	
	line-height:2;

}



/* IE-Hack */

*html ul.menu ul {

    min-width:80px;
}





ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul  {

    display:block;

}



ul.menu ul li {
margin-top:0px;
    float:none;
	background-color: transparent;

}

   ul.menu li.hover ul ul, ul.menu li:hover ul ul {

    display: none;
	width:160px;
    margin-left: 140px; /* Breite eines Listenelements - Überlagerung */
    margin-top: -20px; /* Höhe eines Listenelements */

        }

In einem anderen Forum bekam ich den Tip verschiedene Klassen im CSS festzulegen für die Farbmarkierungen, soweit kann ich dem ganzen noch folgen. Was ich allerdings dann nicht mehr weiß ist, wie ich im TS per Befehl die einzelnen Klassen den jeweiligen Seitenmenüpunkten zu ordne.

Ich hoffe hier kann mir jemand weiterhelfen.

Bildschirmfoto-2011-05-22-um-14.43.31.png