Ik ben bezig met een vrij simpel dropdown menuutje, maar ik wil nu de onderste button in het dropdown menu steeds een andere achtergrond geven. Ik heb al wat rondgesnuffeld op internet en het een en ander geprobeerd, maar niets lijkt te werken.
Zouden jullie misschien weten hoe ik de onderste buttons een andere achtergrond kan geven? Ik dacht aan een id="last" bijvoorbeeld en dan in het css bestand daarnaar verwijzen, maar dat heb ik niet werkend gekregen.
Hieronder de code:
stylesheet.css
#nav, #nav ul {
padding: 3px 0 0 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
width: 120px;
}
#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#nav a {
display: block;
margin: 2px 5px 3px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
ul a{
font-weight: bold;
color: #F60;
cursor: default;
}
ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}
ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}
ul li{
background-color: #CCC;
border-left: 3px solid #FFF;
}
ul ul li{
background-color: #666;
border-top: 3px solid #FFF;
border-left: 0;
}
menu.html
<ul id="nav">
<li><a href="#">Main item 1</a>
<ul>
<li><a href="#">Sub item 1.1</a></li>
<li><a href="#">Sub item 1.2</a></li>
<li><a href="#">Sub item 1.3</a></li>
<li><a href="#">Sub item 1.4</a></li>
</ul>
</li>
<li><a href="#">Main item 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>
</li>
<li><a href="#">Main item 3</a>
<ul>
<li><a href="#">Sub item 3.1</a></li>
<li><a href="#">Sub item 3.2</a></li>
</ul>
</li>
</ul>
Alle tips zijn meer dan welkom!