---
title: "Ul & li - meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/146172-ul-li-meny"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Travoni"
published: "2006-04-27T22:00:45.000Z"
updated: "2006-04-30T07:31:20.000Z"
replies: 6
views: 458
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/146172-ul-li-meny"
---

# Ul & li - meny

## #1 — Travoni, 2006-04-27T22:00Z

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

Bilagor:

- [menu.gif](https://www.webforum.nu/a/10530.gif)

Permalänk: https://www.webforum.nu/p/146172

## #2 — zcorpan, 2006-04-27T22:32Z

```
<!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>
```

Permalänk: https://www.webforum.nu/p/1804564

## #3 — Travoni, 2006-04-28T06:49Z

Härligt, de funkar ju.

Detta: 

.foo ul::before { content:"\\21B3  "; }

verkar inte funka i IE. Men det spelar mindre roll kanske.

Permalänk: https://www.webforum.nu/p/1804602

## #4 — zcorpan, 2006-04-28T08:18Z

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. :)

Permalänk: https://www.webforum.nu/p/1804624

## #5 — Travoni, 2006-04-29T21:03Z

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
```

Bilagor:

- [menu.gif](https://www.webforum.nu/a/10561.gif)

Permalänk: https://www.webforum.nu/p/1805138

## #6 — zcorpan, 2006-04-29T21:25Z

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; ... }
```

Permalänk: https://www.webforum.nu/p/1805144

## #7 — Travoni, 2006-04-30T07:31Z

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.

Permalänk: https://www.webforum.nu/p/1805198

---

Tråden på webben: https://www.webforum.nu/amne/html-css/146172-ul-li-meny
