[CSS] Menu horizontaal maken

[Muthas]

Hallo daar,

ik ben bezig met de navigatie van een site, en aangezien er nogal veel in moet gaat die via pulldown menu's Verticaal is me al gelukt d.m.v. het vast wel bekende CSS menu, die een lijstje omzet in een mooi geheel. Nu wil ik dit menutje ook voor horizontaal gaan gebruiken, weet nog niet of het er mooi uitziet, 2 keer zelfde ding, en als het lelijk is ga ik voor de verticale een vervangende manier gebruiken Ben echter al lang aan het proberen het te veranderen maar het lukt niet. Ook gegoogled en ik kon best veel sites erover kon vinden maar die waren ook verticaal of via een heel andere manier die veel omslachter was. Oh ja er is nog een iets, een javascriptje maar die is om een bug in IE te fixen, en is dus ook niet van belang hier.

mn hml is gewoon een lijstje dus, vereenvoudige versie

code:

<ul id="nav"> 
  <li><a href="#">Hoofd</a> 
    <ul> 
      <li><a href="#">Uitvouw 1</a></li> 
      <li><a href="#">Uitvouw 2</a></li> 
    </ul> 
  </li>   
</ul>

En dit is mn CSS

code:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }

ul li {
    position: relative;
    }
    
li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }


ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    background: #5ba3f9; 
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }


* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }


ul li a:hover { color: #000000; background: #f9f9f9; } 
        
li ul li a { padding: 2px 5px; } 
        
li:hover ul, li.over ul { display: block; }

Wat ik wil is dus dat in plaats van rechts van het verticale 'hoofdmenu' iets te laten uitvouwen nu een horizontale lijst hebben waar het menu eronder uitvouwt.
Heb al veel geprobeerd, maar het lukt niet, telkens ziet het er alles behalve normaal uit

Hoop dat jullie me kunnen helpen en dat me draadje goed is.

[Zoefff]

Je moet de verschillende list-items naast elkaar laten komen. Dat kan je op verschillende manieren doen. Je kan een display:inline; op de ul zetten, of een float:left; op de li. Beide oplossingen zorgen ervoor dat de list-items horizontaal naast elkaar komen te staan.

Daarna hoef je alleen de positie nog een beetje te tweaken zodat ze op een logische plaats uitklappen.

Maargoed, als je even googled naar "css horizontal menu", dan kom je behoorlijk veel sites tegen die oplossingen voor dit soort menu's bespreken. Onder andere http://phoenity.com/newtedge/horizontal_nav/

[crisp]

zoiets?

[Neobender]

En voor luie mensen is er de List-o-matic

[Verwijderd]

ah zoiets als

http://www.terrafidelium.com/ ??? Heb het zo vaak al gebouwd lol ..

[Verwijderd]

A List Apart for all your CSS/Div needs...
Bekijk ook het voorbeeld bij dit article. Ziet er toch mooi uit, niet?

[Muthas]

Bedankt allemaal het is inmiddels gelukt. En die van Zoeff werkt alleen niet in IE btw.