Opbygning af css-klasse hieraki til menuer
Jeg skal lave menuer, og tænkte at jeg ville opbygge det hierakisk for at opnår lettere vedligeholdelse og kodebesparing.Så jeg har prøvet at lave følgende:
<html>
<head>
<style>
.genericmenu{
float:left;
}
.genericmenu.mainmenu{
width:200px;
}
.genericmenu.submenu{
width:200px;
}
.genericmenu.mainmenu.selected{
background-color:green;
width:150px;
}
.genericmenu.mainmenu.Notselected{
background-color:red;
width:150px;
}
.genericmenu.submenu.selected{
background-color:blue;
width:150px;
}
.genericmenu.submenu.Notselected{
background-color:yellow;
width:150px;
}
</style>
</head>
<body>
<div class="genericmenu">
<div class="mainmenu">
<div class="selected">
<a>Linktekst</a>
</div>
<div class="Notselected">
<a>Linktekst</a>
</div>
</div>
</div>
<div class="genericmenu">
<div class="submenu">
<div class="selected">
<a>Linktekst</a>
</div>
<div class="Notselected">
<a>Linktekst</a>
</div>
</div>
</div>
</div>
</body>
</html>
Problemet er at der kun bliver vist 2 farver nemlig blå og gul.
Så det er som om de nedeserste klasser i i hierakiet bliver overskrevet.
Kan det overhovedet lade sig gøre at arbejde med CSS på denne måde eller har jeg misforstået det?
Mvh...
