Navigationsleiste "verstecken"

[kaepten]

Hallo,

Ich möchte das hier hin bekommen!
http://www.cssplay.co.uk/menus/slide_definition.html
Mein jetzige Codes sieht ihr hier unten.

Es steht alles neben einander und nicht unter einander!
Was mache ich falsch? Kann mir jemand helfen und es korrigieren damit es so aussieht wie auf dem einen Link?

<ul id="navlinks">
    <li><a href="#haupt">Hauptfächer</a>
             <ul>
                 <li>Deutsch</li>
                 <li>Mathe</li>
                 <li>Englisch</li>
                 <li>BWL</li>
             </ul>
    </li>
    <li><a href="#neben">Nebenfächer</a>
             <ul>
                 <li>WI</li>
                 <li>IKT<li>
                 <li>GW</li>
                 <li>BM</li>
                 <li>Religon</li>
                 <li>Navision</li>
                 <li>GGK</li>
                
             </ul>
    </li>
    <li><a href="#pru">Prüfung</a>
    </li>

</ul>

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul, li {
  display: inline;
}
ul#navlinks li ul {
  display: none;
}
ul#navlinks li:hover ul {
  display: inline;
}
ul#navlinks li a {
  background: #e3e3e3;
  padding: 5px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

 

[nookie]

Du kennst aber schon den Unterschied zwischen inline und block?

ul, li {
  display: inline;
}

Mach da mal ein display: block drauß.

 

[kaepten]

Du kennst aber schon den Unterschied zwischen inline und block?

Habe es auf einer Seite gefunden und habe das mal kopiert und dann kam das raus ^-^

Mit display: block; hat es geklappt! Danke :)n

 

[nookie]

Du sollst deinen Quellcode ja auch nicht zusammen kopieren, sondern verstehen was du dort schreibst... Sowas ist echt nervig, für alle hier.