[CSS] ul background-image wordt overschreven door li backgro

[koenevers]

Halllo allemaal,

Ik heb me vandaag de hele dag suf zitten werken aan een dropdown menu dat lauter bestaat uit css. Tot op heden lukt me dit vrij aardig, zei het dat ik tegen een probleem aanloop waar ik ondanks al mijn zoekopdrachten niet uitkom.

Ik zal eerst mijn code weergeven:

Cascading Stylesheet:

<style>
li { background-color: #000; }
</style>

PHP:

<ul style="background-position: bottom left; background-repeat: no-repeat; background-image: url(media/opmaak/uitrol_menu_bg.gif);">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>

Deze code is deel van mijn dropdown menu.

Het probleem waar ik tegenaan loop is het volgende: Ik zou graag mijn dynamisch menu een achtergrond willen geven. Dit achtergrondplaatje is echter niet even groot als het menu. Dit plaatje positioneer ik dan op de bodem van het menu, echter wil ik dat waar het plaatje ophoudt hij een bepaalde achergrondkleur weergeeft, zodat het plaatje mooi op deze achtergrondkleur aansluit.

Met bovenstaande code geeft zowel Internet explorer als Firefox het li background-color over de achtergrond weer, wat ik dus niet wil.

Mijn vraag is dus nu: hoe los ik dit het makkelijkst op? Enige vereiste voor het menu is dat de <ul><li> structuur behouden wordt, anders werkt het dropdown effect niet meer.

Alvast bedankt voor jullie reacties

[mcDavid]

die background-color niet op de li zetten maar op de ul?

[Verwijderd]

mcDavid heeft gelijk, je zult de background-color op de ul moeten zetten, en geen background-color op de li, waardoor deze dus transparant blijft.