Horizontaal dropdown menu highlight met php include werkt niet 100%

[Elsnorry]

Ik weet niet of mn post hier op de juiste plaats staat? Ik denk dat dit een css probleem is dus zet ik hem hier maar.

Ik gebruik dus een php include voor mn menu zodat ik gemakkelijk in 1x mn menu kan aanpassen voor elke pagina. Ik had graag dat de categorie van de pagina die je open hebt staan een andere font kleur en background kleur heeft als de rest van de categorieën. ik heb dit werkende zie *weg* maar ik krijg het niet in orde dat categorie "materialen" ook opgelicht is als ik op de pagina beton, marmer of arduin ben.

Ik kom er maar niet uit en krijg het niet in orde Iemand die de oplossing weet?

Mn menu:

<div class="cssmenu">
<ul id="dropnavigatie" class="sf-menu">
<li><a href='index.php'id="index">Home</a></li>
   <li><a href='#'>Materialen</a>
      <ul>
         <li><a href='beton.php'id="beton">Beton</a></li>
         <li><a href='marmer.php'id="marmer">Marmer</a></li>
         <li><a href='arduin.php'id="arduin">Arduin</a></li>
      </ul>
   <li><a href='contact.php'id="contact">Contact</a></li>
</ul>
    </div>

Mn css:

body#index a#index, body#beton a#beton, body#contact a#contact , body#marmer a#marmer, body#arduin a#arduin
{
        background-color: #333;
        color: #FFFFFF;
}
#dropnavigatie {
    background:#000000 repeat-x;
    font-size:14px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#dropnavigatie, #dropnavigatie ul {
    float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    margin:0;
    width:100%;
    background-color: black;
}

#dropnavigatie a {
    display:block;
    color:#FF0000;
    text-decoration:none;
    padding:0px 10px;
}

#dropnavigatie li {
    float:left;
    padding:0;
}

#dropnavigatie ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:131px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#dropnavigatie li li {
    width:130px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:helvetica,sans-serif;
}

#dropnavigatie li li a {
    padding:4px 10px;
    width:111px;
    font-size:12px;
    color:#fff;
}

#dropnavigatie li ul ul {
    margin:-21px 0 0 100px;
}

#dropnavigatie li li:hover {
    background:#fff;
}

#dropnavigatie li ul li:hover a, #dropnavigatie li ul li li:hover a, #dropnavigatie li ul li li li:hover a, #dropnavigatie li ul li li li:hover a {
    color:#333;
}

#dropnavigatie li:hover a, #dropnavigatie li.sfhover a {
	color:#fff;
}

#dropnavigatie li:hover li a, #dropnavigatie li li:hover li a, #dropnavigatie li li li:hover li a, #dropnavigatie li li li li:hover li a {
    color:#fff;
}

#dropnavigatie li:hover ul ul, #dropnavigatie li:hover ul ul ul, #dropnavigatie li:hover ul ul ul ul, #dropnavigatie li.sfhover ul ul, #dropnavigatie li.sfhover ul ul ul, #dropnavigatie li.sfhover ul ul ul ul {
    left:-999em;
}

#dropnavigatie li:hover ul, #dropnavigatie li li:hover ul, #dropnavigatie li li li:hover ul, #dropnavigatie li li li li:hover ul, #dropnavigatie li.sfhover ul, #dropnavigatie li li.sfhover ul, #dropnavigatie li li li.sfhover ul, #dropnavigatie li li li li.sfhover ul {
	left:auto;
	background:#999999;
}

#dropnavigatie li:hover, #dropnavigatie li.sfhover {
	background:#333333;
}

 

[eeopd]

Je hebt nu een pagina waarbij 2x hetzelfde id bent. Dat kan een (oudere) browser traag maken en raar laten doen. Id's moeten uniek zijn. Daarvoor zijn ze bedoeld. Je kunt bijvoorbeeld de id's in het menu vervangen door "linkindex".
Ook moet je een spatie hebben tussen 2 attributen, ook dit kan een browser trager maken.
Dus ipv

<a href='index.php'id="index">Home</a>

dit:

<a href='index.php' id="linkindex">Home</a>

(en voor de rest van je items.
Maar goed, over je css, met je eerste regel selecteer je als je op de pagina marmer, beton of arduin bent, alleen het dropdownmenu, en die maak je grijs, maar die was al grijs, dus dat doet niets. Je moet dus het bovenliggend menu selecteren, dat kan bijvoorbeeld door dit toe te voegen aan je selectors op de eerste regel.

body#marmer a#linkmaterialen

Je moet nu trouwens wel id="linkmaterialen" toevoegen aan Materialen

 

[Elsnorry]

Ja ik weet dat je geen twee id's mag gebruiken op een pagina maar had er een class van gemaakt maar dat werkte niet helemaal goed, met id wel. In het menu een andere id gebruiken was gewoon niet in me opgekomen stom van me. Vanaf nu zal ik tussen de attributen altijd een spatie toevoegen, weer wat bijgeleerd.

Heb het allemaal toegepast en het werkt perfect:thumb:

Honderdduizend maal bedankt!