Klappmenü in die länge

Lolle.herz
Hallo,

Ich habe mal wieder ein Problem mit meinem Menü. Ich weiß nicht warum das so ist, aber es will einfach nicht in die Länge gehen.
Die ersten 3 Menüpunkte sind so wie ich sie haben möchte, aber die andere 3 (ab "Zuchtpferde" ) sind plötzlich darunter?
Kann mir jemand helfen das alle Menü punkte gerade in einer Reihe sind? Ich habe alles versucht...

CSS Code:
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
#menu {
  font-size:14px;
  position:absolute;  
}

#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}

#menu li.topmenu {
  float:left;
}

.topmenu a {
  float:left;
  width:100px;
  text-align:center;
}

.topmenu ul{
  display:none;
}

.topmenu a, .submenu a{
  padding:1px 5px;
  border:1px solid #C37000;
  border-collapse:collapse;
  color:#C37000;
  font-weight:bold;
  text-decoration:none;
  background-color:#7F4800;
  margin:0;  
}

.submenu a{
  font-size:12px;
  width:110px;
  position:relative;
  clear:both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#4C4C4C;
  background-color:#ffddbb !important;
}

.topmenu:hover ul {
  display:block;  
  z-index:500;
}


Menü code:
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
<html>
<head>
<link rel='stylesheet' href='css.css' type='text/css'>
</head>
<body>  
  <div id="menu">
    <ul>
      <li class="topmenu">
        <a href="">Startseite</a>
        <ul>
        <br>
        <br>
          <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Unser Gestüt</a>
        <ul>
        <br>
        <br>
          <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Die Zucht</a>
        <ul>
        <br>
        <br>
          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li class="topmenu">
        <a href="">Zuchtpferde</a>
        <ul>
        <br>
        <br>
          <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Turnierpferde</a>
        <ul>
        <br>
        <br>
          <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Nachzucht</a>
        <ul>
        <br>
        <br>
          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
        </ul>
      </li>
    </ul>
    <ul>   
    </ul>
  </div>
</body>
</html>


Index Code:
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
<html>
<head>
<title>Virtuelles Gestüt Fairytale</title>
<BODY marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" scroll="auto">
<body background="Hintergrund.png"></body>
<IMG NAME="Design1" SRC="DesignFairytale.png" WIDTH="1024" HEIGHT="768" BORDER="0" USEMAP="Hintergrund.png">

<center><div id="Layer1" style="position: absolute; left: 39px; top: 307px;">
<iframe src="main.html" name="main" width="942" height=354" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
</iframe>
</div>

<center><div id="Layer2" style="position: absolute; left: 160px; top: 237px;">
<iframe src="menu.html" name="menu" width="900" height="100" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
</iframe>
</div>
</body>
</html>



Ich würde mich sehr über eine Hilfe freuen. Momentan sieht es so aus: *klick*

mfg Judith
Nanni
Also ich kenn mich mit dem Ding nicht wirklich gut aus, aber ich hab eine Vermutung:
Ich würde sagen es liegt an dem </ul> <ul> zwischen "Die Zucht" und "Zuchtpferde", ist ja irgendwie auffällig, wieso du zwischen den beiden Menüpunkten ul beendest und neu anfängst und zwischen den anderen nicht ;D
WuLana
hmmm wenn ich mir das ganze in dreamweaver anguck funktionierts einwandfrei, hat also was mit der frame größe zu tun wo das ganze drin liegt
eventuell vergrößerst du das ganze design in die breite oder probierst einfach ma ne verdoppelung des divs bzw des frames
grundlegend würde ich dir ja empfehlen statt i frames divs zu verwenden die sind verträglicher, benötigen aber php,
wenn du willst kann ich dir das auf php umcoden dann gehts vllt
lg oldy
Lolle.herz
Vielen Dank Nanni & und auch Oldgirl.

Ich habe nun aber noch eine Frage. Nun ist zwar alles gerade aber so eng zusammen... und nur beim rüber fahren mit der Maus gehen die Menüpunkte auseinander.
Kann mir jemand sagen wie ich die Menüpunkte von Anfang an auseinander bekomme?

Zudem öffnet mein Menü die Menüpunkte immer im Menüfeld... Weiß jemand zufällig wie ich es anders hinbekomme?

mfg Judith
WuLana
das mit dem öffnen würd ich aufs i frame schieben,
wie man das wegbekommt:
mit divs &include arbeiten damit der das ins andre div includiert weil sonst öffnet das der in dem frame wo sich das befindet
Ich könnt dir den index code dafür schreiben und erklären wenn du willst wie schon gesagt^^

lg oldy
edit: ehm mit den größenänderungen kann ich dir leider nicht wirklich helfen aber spiel ma bissl im css rum bei "width"
Lolle.herz
Hallo Oldgirl,

Ich habe dir eine PN geschrieben Augenzwinkern
mfg Judith