Horizontale Navigation verbessern

[Hansii]

Hallo.

Habe eine Menü:

Thema 1
Thema 1.1
Thema 1.2
Thema 1.3
Thema 2
Thema 2.1
Thema 2.2
Thema 2.3

Dank Tutorials habe ich Sie einiger Maßen hinbekommen. Allerdings noch ein Problem: Ich will, das Thema 1 und 2 neben einander stehen und nicht untereinander. Mit display: inline; habe ich es nicht geschafft.

<link rel="stylesheet" type="text/css" href="navi.css" />
<div id="navi">
 <ul>
  <li>Thema 1
   <ul>
    <li><a href="#">Thema 1.1</a></li>
    <li><a href="#">Thema 1.2</a></li>
    <li><a href="#">Thema 1.3</a></li>
   </ul>
  </li>
  <li>Thema 2
   <ul>
    <li><a href="#">Thema 2.1</a></li>
    <li><a href="#">Thema 2.2</a></li>
    <li><a href="#">Thema 2.3</a></li>
   </ul>
  </li>
 </ul>
</div>
<div style="clear:both;"></div>

*{
margin: 0;
padding: 0;
}

#navi{
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

#navi ul{
float: left;
width: 140px;
list-style-type: none;
}

#navi li{
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
position: relative;
}

#navi a{
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
}

#navi a:hover{
color: #ff9224;
background: #003366;
}

#navi ul ul{
position: absolute;
z-index: 2;
display: none;
}

#navi ul li:hover ul{
display: block;
}

Danke

 

[bdt600]

Ein Tipp von mir: Guck dich mal hier um: Stu Nicholls | CSSplay | CSS only menus Da findest du gute Beispiele, die du kopieren kannst.

 

[Hansii]

Danke für deine Antwort. Diese Seite kenne ich. Ich habe ja jetzt auch etwas akzeptables. Ist das denn möglich, die in eine Reihe zu setzen ?

Normal habe ich das mit

display: inline;

geschafft. Hier klappt das aber nicht. :(

 

[Tronjer]

Schon float: left versucht?

 

[Hansii]

Habe ich soeben versucht, klaptt nicht. Also display:inline; und float:left; funktionieren nicht. Warum ? Geht sonst auch !?

 

[T4k3C4r3]

Füg mal

#navi ul li{
    float:left;
}

hinzu.

 

[threadi]

Vlt. scheiterts auch daran, dass Du die ganze Liste floatest (bei #navi ul).

 

[T4k3C4r3]

Hab es nach meiner oben genannten Lösung ausprobiert. Dann funktioniert es bis auf den drop down wo irgentwo ein float zu viel ist.