[CSS/HTML] List menu achtergrond

[ViNyL]

Ik ben bezig met een list menu. Ik wil bij een active item een pijltje plaatsen. Dit kan zowel bij een parent, maar ook bij een child.

Het list menu bij ik op met een un-ordered list.

Hiervoor heb ik 2 classes gemaakt: current en subcurrent. current als een parent aangeklikt is, en subcurrent als een child aangeklikt wordt.

Een probleem waar ik tegen aan loop is dat bij het plaatsen van de current class bij een parent de achtergrond ook bij de child items verschijnt, terwijl repeat op 'no repeat' staat in mijn stylesheet. Blijkbaar wordt de class dus ook op mijn subitems te gepast.
Als ik het zelfde doe bij een subitem met de class 'subcurrent' dan heb ik dat probleem niet.

Hier is de 'current' class toegepast op de parent:


Hier is de 'subcurrent' class toegepast op een child:


Dit is mijn css:

Cascading Stylesheet:

    #navigatie {
        font-family:Georgia, "Times New Roman", Times, serif;
        letter-spacing: 0px;
        font-size: 13px;
        width: 270px;
        float: left;
        margin-left: 30px;
        margin-top: 20px;
    }
    
    #navigatie ul {
        list-style:none;
        margin:0;
        padding:0;
        border: none;
        border-bottom: solid 1px #787a79;
    }
    
    #navigatie li {
        border-top: solid 1px #787a79;
    }
    
    #navigatie li a {
        display: block;
        padding: 10px 5px 10px 0.5em;
        text-decoration: none;
        width: 100%;
        color: #000;
    }
    
    #navigatie li a:hover {
        color: #733d4a;
        font-weight: 500;
    }
    
    #navigatie li.current a {
        background-image: url(arrow.gif);
        background-position:right;
        background-repeat:no-repeat;
    }
    
    
    #navigatie li ul {
        border-bottom: none;
        list-style-image:url(images/bullet.gif);
        color: #666867;
        margin-left: 35px;
    }
    
    #navigatie li li {
        border-top: none;
    }
    
    #navigatie li li a {
        display: block;
        padding: 0px 5px 10px 7px;
        text-decoration: none;
        width: 100%;
        color: #000;
        font-size: 12px;        
    }
    
    #navigatie li li.subcurrent a {
        background-image: url(images/arrow-sub.gif);
        background-position:right;
        background-repeat:no-repeat;
    }

Dit is de HTML van het menu:

HTML:

<div id="navigatie">
<ul>

<li class="current"><a href="">ACTIVITEITEN</a>
        <ul>
        <li><a href="">SUBITEM 1</a></li>
        <li><a href="">SUBITEM 2</a></li>
       </ul>
</li>
<li><a href="">VERGUNNINGEN MANAGEMENT</a></li>
<li><a href="">RUIMTELIJKE ORDENING</a></li>
<li><a href="">MILIEUONDERZOEKEN</a></li>
<li><a href="">PROJECTLEIDING & MANAGEMENT</a></li>
<li><a href="">ADVIES</a></li>
</ul>
</div>

Zie ik iets over het hoofd?

[MueR]

Cascading Stylesheet:

#navigatie li li a { background:none; }

De nasi is ook in de aanbieding deze week. Geen dank verder.

[ Voor 11% gewijzigd door MueR op 19-03-2010 16:29 ]