Dropdown Menü Problem

[Beavis]

Guten Tag
Ich habe ein Problem mit meinen Dropdown Menü

Wenn ich mit der Maus über das Menü gehe, dann verschiebt sich der gesammte Header bereich (vom Text her)

Hier ist mein CSS Code dazu
Dropdown Menü

.topmenu ul{
  display:none;
}

.submenu a{
    color:black;
    width:110px;
    position:relative;
    clear:both; /* special IE6 */
}

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

.topmenu:hover ul {
    display:block; 
    z-index:500;
    width:auto;
    border: 2px solid BLACK;
      background:url("image/main.png") left top repeat;
    width:auto;
    padding:8px 8px;
}
.submenu a:hover {color:grey;}

Der Header css code

#headerContainer {
    width: 100%;
    height: 184px;
    margin: 0 auto;
}

.headerMenu {
    width: 100%;
    height: 184px;
    background: url("image/header_logo.png") no-repeat scroll center top;
    list-style: none;
    text-align: center;
}

.headerMenu li {
    margin-top:75px;
    display: inline-block;
}

.headerMenu  a{
    color: rgb(93, 205, 233);
    font-size: 18px;
    margin-right: 15px;
    line-height: 29px;
}

.headerMenu  a:hover{

Und so wende ich es an:

        <div id="headerContainer">
            <ul class="headerMenu">
                <li><a href="index.php">Startseite</a></li>
                <li><a href="index.php?page=hausmeister">Hausmeisterservice</a></li>
                <li><a href="index.php?page=heimwerker">Heimwerkercenter</a></li>
                <li><a href="index.php?page=pflege">Auto-/Gartenpflege</a></li>
                <li><a href="index.php?page=news">Angebote</a></li>
                <li class="topmenu">
                    <a href="#">Test</a>
                    <ul>
                        <li class="submenu"><a href="#">Dropdown 1</a></li>   
                        <li class="submenu"><a href="#">Dropdown 2</a></li>   
                    </ul>
                </li>
            </ul>
        </div>

Das Muster wie es im Menü ausschaut:

Ich bin am Zweifeln woran das liegen kann und hoffe auf eure Hilfe

 

[Banana_Jones]

ein position: absolute; für das Untermenü sollte schon mal ein Schritt in die gewünschte Richtung sein...

 

[Beavis]

Danke damit ist der Fehler behoben

Wie muss ich das nu machen das Dropdown 1 & 2 untereinander stehen?

 

[Bennyville]

Versuche mal display: block; auf die li's des Dropdowns.

 

[Beavis]

Danke dir
Habe nun das Problem das mit den Internet Explorer das Dropdown Menü nicht Funktioniert
Es wird nicht angezeigt etc

Was muss ich machen um alles auf den Internet Explorer richtig anzupassen?

 

[Bennyville]

Gerne!

Hm... da müsste ich mit dem IE mal reingucken können. Ein Link wäre da super?!