sub sub menu color

[oompie8874]

Hallo,

Ik probeer het "sub sub" menu een oranje kleur ipv grijs, te geven en de tekst een zwarte kleur wanneer je erover hovert. Echter is het niet mogelijk de kleur aan te passen zonder ook het sub menu zelf te verkleuren, weet iemand hoe dit is op te lossen?

Situatie nu:


css

		nav {
	margin: 100px auto; 
	text-align: center;
	}
		nav ul ul {
	display: none;
	}
		nav ul li:hover > ul {
	display: block;
	float:center;
	}
		nav ul {
	background: #bebec2;
	list-style: none;
	position: relative;
	}
	nav ul:after {
	content: "";
	clear: both;
	display: block;
	}
		nav ul li {
	float: left;
	box-sizing: inherit;
	}
		nav ul li:hover a {
	color: #eb9c33;
	}	
		nav ul li a {
	display: block; 
	padding: 35px 30px;
	color: #fff; 
	text-decoration: none;
	
	}	
		nav ul ul {
	position: absolute; top: 100%;
	color: #000;
	}
		nav ul ul li {
	float: none;	
	position: static;
	font-family: Arial;
	font-size: 10px;
	line-height: 18px;
	margin-top: -20px;
	z-index: 3;
	background: #5f5f6a;
	}
		nav ul ul li a {
	padding: 12px 10px;
	color: #000;
	}	
		nav ul ul li a:hover {
	float: center;	
	color: #fff;
	}
		
	nav ul ul ul {
	border: solid 1px;
	margin-top:5px; 
	position: absolute; 
	left: 120px; 
	top:10px;
	color: #fff;
	}

Alvast hartelijk dank!

 

[mastermindzh]

Ik heb dit een tijdje geleden gedaan.

Dit is de code ervan:

/*menu */

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;	/*tekstkleur*/
    border-top: 1px solid #ebebeb; /*border kleur*/
    padding: 5px 15px 5px 15px;
    background: #FA9E25; /*kleur menu*/
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
	background: #3b3b3b;/*onmouseover kleur (alleen als het link is)*/
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a {
	background: #3b3b3b; /*kleur met hover eerste niveau*/
}
li:hover li a:hover {
	background: #FA9E25; /*Kleur met hover, 2de niveau*/
}

/* menu end */

 

[csshunter]

Hoi oompie8874,
Mastermindzh was me voor. Ik had een algemeen verhaaltje gemaakt.

Eigenlijk gaat het om verder gaan met het watervalletje van de css-cascade:

de menu / submenu / sub-submenu cascade​

• De #nav ul is het lijstje met de hoofdmenu-items; dat zijn de #nav ul li's met daarin de links #nav ul li a {..}.
• Voor de hovers zitten daar de hover-styles bij.
• Doe je niets, dan roetst de waterval naar beneden en hebben alle andere ul's, li's en a's eronder dezelfde styles en hover-styles.
• Maar de submenu-background heeft al een andere kleur gekregen: #nav ul ul li {background: #5f5f6a;}. Een paraplu onder de waterval als het ware met een licht grijze background, die nu droog blijft onder de spatten van de lichtgrijze algemene #nav ul {background: #bebec2;}.
• Doe je niets, dan roetst de waterval naar beneden en hebben alle andere li's eronder dezelfde styles.
• Maar dat moet niet: de sub-submenu li's moeten oranje worden. Dan krijgen die ook een paraplu, deze keer met de oranje background.
• En de sub-submenu li's heten: #nav ul ul ul li {...}.
• Daar komt de oranje background dus in te staan.

Op dezelfde manier kan je de tekstkleur van de links aanpassen voor alle gewenste trappetjes. En de hover-tekstkleuren daarbij.
Je kunt desgewenst ook de background van een gehoverd item op elk niveau aanpassen, enz. enz.

Met vriendelijke groet,
CSShunter
_______
PS
Hé, {float: center;} bestaat niet.

 

[oompie8874]

Wow, bedankt heren. Wat een uitgebreide uitleg nu is het mij een stuk duidelijker! Super! Hartelijk dank!