---
title: "Räcker inte ett id för att hålla isär en meny från en vanlig lista?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/152744-räcker-inte-ett-id-för-att-hålla-isär-en-meny-från-en-vanlig-lista"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "aasah"
published: "2006-10-19T16:53:56.000Z"
updated: "2006-10-19T18:15:35.000Z"
replies: 4
views: 420
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/152744-räcker-inte-ett-id-för-att-hålla-isär-en-meny-från-en-vanlig-lista"
---

# Räcker inte ett id för att hålla isär en meny från en vanlig lista?

## #1 — aasah, 2006-10-19T16:53Z

Ursäkta knasig rubrik...

Jag har en meny som bygger på en "\<ul\>, \<li\>"-lista som definieras till ett drop-down-meny-utseende mha CSS. Detta utseende definieras för aliaset #nav *enbart*.

Men sedan har jag "\<ul\>, \<li\>"-listor på några av mina sidor, vilka jag vill ska se ut som **listor**. Dessutom vill jag att de ska ha samma margin och padding som alla andra element på sidan. Så då la jag in:

```
li, ul, ol { 
  margin: 5px;
  padding: 5px;
}
```

Problemet är att då åker även menyns li och ul element iväg... Hur löser jag detta? Nav definieras enligt:

```
#nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
}

#nav a {
        display: block;
        width: 6em;
}

#nav li {
        float: left;
        width: 6em;
}

#nav li ul {
        position: absolute;
        width: 6em;
        left: -999em;
}

#nav li:hover ul {
        left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
        left: auto;
}
```

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

## #2 — nitro2k01, 2006-10-19T16:57Z

Ge listan ett class-attribut, eller lägg den i en div med ett class-attribut.

```
.lista li, .lista ul, .lista ol { 
  margin: 5px;
  padding: 5px;
}
...
<div class="lista">
<ol>
...
</ol>
</div>
```

Edit: Och för att svara mer specifikt på din fråga: När du skriver li, ul, ol så syftar du på alla element med det taggnamnet, även om de har ett class-attribut.

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

## #3 — jarvklo, 2006-10-19T17:07Z

Hmm...

Grundinställning: 
ul padding 5 pixel samt margin 5 pixel
li padding 5 pixel samt margin 5 pixel

Navigationen ställer bara in padding och margin för ul, vilket ger att:
\#nav ul - egen regel - noll i marginal och noll i padding
\#nav li - regel saknas, men li har en regel om att margin och padding skall ha 5 pixel margin och padding, så då gäller den.

Lägg till #nav li (och kanske #nav ol om du vill använda ol för navigeringen ;) ) i din första regel bara så bör det funka 

```
#nav, #nav ul, [b]#nav li, #nav ol[/b] {
        padding: 0;
        margin: 0;
        list-style: none;
}
```

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

## #4 — aasah, 2006-10-19T17:41Z

> **nitro2k01 skrev:**
>
> Edit: Och för att svara mer specifikt på din fråga: När du skriver li, ul, ol så syftar du på alla element med det taggnamnet, även om de har ett class-attribut.

Åhå... det är ju onekligen bra att veta.

Jarvklo - Tack för en ordentlig utredning! Men...

> **jarvklo skrev:**
>
> Lägg till #nav li (och kanske #nav ol om du vill använda ol för navigeringen ;) ) i din första regel bara så bör det funka 
>
> ```
> #nav, #nav ul, [b]#nav li, #nav ol[/b] {
>         padding: 0;
>         margin: 0;
>         list-style: none;
> }
> ```

Funkar det när man har en separat definition för #nav li alldeles nedanför? (Se citerad CSS ovan.)

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

## #5 — zcorpan, 2006-10-19T18:15Z

Svar ja. Det kallas [kaskad](http://www.autisticcuckoo.net/arkiv.php?id=2005/01/22/arv-och-kaskad). :)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/152744-räcker-inte-ett-id-för-att-hålla-isär-en-meny-från-en-vanlig-lista