Problem z poziomym menu na divach, CSS Opcje

[tomazzi]

Próbuje zrobić poziome menu, gdzie pozycją jest div a w nim link. Chcę, aby cały div był linkiem. Aktualnie nie wiem dalczego ale pozycje menu wyświatlane są pod sobą.
CSS:

Kod

.pozycja {
    display: inline;

    width: 120px;
    height: 40px;
    color: whitesmoke;
    font-weight: bold;
        background-color:     #C9B5E8;
}

a:hover{
    background-color:     #C9B5E8;
}


#menu {
    background-color: #8658CB;
    
}
a{
    display: block;
    
}

HTML:

Kod

<div id="menu">
    <div class="pozycja"><a href="#">POZYCJA1</a></div>
    <div class="pozycja"><a href="#">POZYCJA2</a></div>
        <div class="pozycja"><a href="#">POZYCJA3</a></div>
</div>

Co należałyby zmienić/dodać?

Ten post edytował tomazzi 4.06.2013, 16:49:02

[nospor]

1) Menu to się robi raczej na UL -> LI
2) Dałeś dla A BLOCK, więc raczej nie ma co się dziwić, że ci zjezdza do nowej linii

[tomazzi]

Wykorzystałem <ul>, <li> zgodnie z tuturialem na stronie http://www.kurshtml.edu.pl/css/poziome_menu,menu.html i menu dalej jest w pionie> Kod:

Kod

ul, ul li {
    display: block;
    list-style: none;
    width: 120px;
    height: 40px;
    color: whitesmoke;
    font-weight: bold;

}

ul li {
      display: inline;
}

Kod

<ul>
    <li><a href="#">POZYCJA1</a></li>
    <li><a href="#">POZYCJA2</a></li>
     <li><a href="#">POZYCJA3</a></li>
</ul>

[Arcioch]

Jak już to tak

[HTML] pobierz, plaintext 
ul {
    display: block;
    list-style: none;
    margin: 0;
   padding: 0;
 
}
 
ul li {
    display: inline-block;
    width: 120px;
    height: 40px;
    color: whitesmoke;
    font-weight: bold;
}
[HTML] pobierz, plaintext