Onderste button in menu anders maken
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
Quote:
#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;
}
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
Quote:
<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>
<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!
Gewijzigd op 07/07/2010 14:14:18 door Joeri de Groot
in je css,
.last {
background: #000000;
}
en de laatste li word dit, met de rest erachter uiteraat.
<li class="last"><a...
wil je de link aanpassen dan kan dat met .last a { css stijl}
Gewijzigd op 07/07/2010 15:22:38 door Johan Dam
http://www.sceneone.nl/tips_tricks/drop_down_menu.php
Ik ben er nu ook mee bezig (voor de fun ^^)
Maar hoe krijg ik de drop down menu gecentreerd?