6 svar · 453 visningar · startad av Travoni
Jag skulle vilja ha en "nested" ul och il - meny enligt bilden.
Men jag fattar inte hur jag skall få till det.
I bildexemplet så har man valt ex. Saab och motorer.
Går det att få till detta med css? Hur?
(Det skall inte vara javascript och någon hovermeny, det viktiga är bara att "elementen" kommer som på bilden)
Hälsningar
/t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>listor</title>
<style type="text/css">
.foo { text-transform:uppercase; font-weight:bold; white-space:nowrap; }
.foo li { display:inline; position:relative; padding-right:1em; }
.foo ul { position:absolute; top:2em; left:0; margin-left:0; padding-left:0; font-size:small; }
.foo ul::before { content:"\21B3 "; }
.foo ul ul { top:1.8em; }
</style>
</head>
<body>
<ul class="foo">
<li>Volvo</li>
<li>Saab
<ul>
<li>Fälgar</li>
<li>Motor
<ul>
<li>Förgasare</li>
<li>Tändsystem</li>
<li>Block</li>
</ul>
</li>
<li>Kaross</li>
<li>Belysning</li>
</ul>
</li>
<li>BMW</li>
<li>Mercedes</li>
<li>Volkswagen</li>
</ul>
</body>
</html>
Härligt, de funkar ju.
Detta:
.foo ul::before { content:"\21B3 "; }
verkar inte funka i IE. Men det spelar mindre roll kanske.
Näe, IE saknar stöd för CSS genererat innehåll. Om du behöver en pil i IE kan du kanske använda en bakgrundsbild istället. :)
Hum, jag kom på att jag har en till fråga.
Om jag vill sätta min lilla meny i en div (se bild).
Så lägger sig menyn utanför.
Jag skulle vilja att diven "följer med", går det å i sådana fall hur?
#cont{ border:1px dotted green;width:400px;}
...
<div id="cont">
<ul class="foo">
<li>Volvo</li>
<li>Saab
...
</div>
Text text text text
Eftersom den använder absolut positionering kan inte boxen anpassa storleken automatiskt, men förmodligen vet du den tänkta höjden (beroende på hur många rader du har) så du skulle kunna ange det manuellt:
.foo { height:4.5em; ... }
Ok, vad värdelöst.
Trodde att man kunde göra så. Att ul-menyn förhåller sig absolut positionerad i förhållande till lagret.
Nix, menyn är dynamisk och kan vara fler rader än vad som jag har angett.
Trist.