gebruiker78
Gebruiker
- Lid geworden
- 29 jun 2010
- Berichten
- 428
Hallo,
Ik ben al heel lang bezig met css maar er is altijd een ding dat ik nooit begrepen heb. Werken met li's en ul's.
De vraag is dan ook een beetje "willen jullie het voor mij doen" maar als je tips kan geven is dat ook goed!
Ik zou graag het volgende toe willen voegen aan het script:
1. voor elke li een specifieke kleur als er een hover event is.
2. zelfde voor ul in dat rijtje
3. nog een 3de rij toevoegen
ik snap wel wat er ongeveer moet gebeuren maar het lukte mij niet.
1. dan moet ik waarschijnlijk bij elke li een style="" maar met wat erin?
2. dat is net als 1 maar hoe?
3. dat zou ik echt niet weten...
het idee gepaint: (let niet op mijn paint skills...)
bron code:
Ik ben al heel lang bezig met css maar er is altijd een ding dat ik nooit begrepen heb. Werken met li's en ul's.
De vraag is dan ook een beetje "willen jullie het voor mij doen" maar als je tips kan geven is dat ook goed!
Ik zou graag het volgende toe willen voegen aan het script:
1. voor elke li een specifieke kleur als er een hover event is.
2. zelfde voor ul in dat rijtje
3. nog een 3de rij toevoegen
ik snap wel wat er ongeveer moet gebeuren maar het lukte mij niet.
1. dan moet ik waarschijnlijk bij elke li een style="" maar met wat erin?
2. dat is net als 1 maar hoe?
3. dat zou ik echt niet weten...
het idee gepaint: (let niet op mijn paint skills...)
bron code:
HTML:
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="">Cozy Couch</a></li>
<li><a href="">Great Table</a></li>
<li><a href="">Shiny Shelf</a></li>
<li><a href="">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
HTML:
/* menu */
ul{
font-weight: bold;
font-size: 24px;
margin: 0;
padding: 0;
list-style: none;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
padding: 8px 5px 0px 5px;
background: orange;
white-space: nowrap;
}
ul li a:hover{
background: blue;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: yellow;
}
li:hover li a:hover{
background: green;
}
)
