dropdown menu mit position relative problem im ie7

[webfan]

hallo zusammen ich habe folgendes problem, ich habe ein dropdownmenu erstellt (CSS) mit position relative, den content habe ich ensprechent mit einem negativen margin top nach oben, hinter das dropdown gezogen.

nun zeigt der ie7 aber das dropdown nicht wie alle anderen browsern vor dem content, sondern hinter dem content, also kurzgesagt: es passiert einfach nichts bei mouseover.

position absolute löst das problem aber es wäre in diesem fall nicht so designfreundlich (weil ich es nicht auf die gleiche breite bringe bei verschiedenen auflösungen) deshalb möchte ich gerne wen es irgentwie möchglich ist, es bei relative belassen.

hat hier einer ein tipp für mich wie ich das problem lösen könnte? ich wäre echt dankbar.

/*---------------------------- MN = Mainnavi ------------------------------*/

#mainnavi {
    margin-top:2px;
    width:100%;
    background:#fff;
    font-size:1.3em;
    
}

#mainnaviul {
    float:left;
    width:100%;
    list-style:none;
    
}

#mainnaviul li{
    float:left;
    width:20%;
    list-style:none;
    
}

#mainnaviul a {
    display:block;
    text-align:right;
    height:3em;
    background:#FFF;
    border:solid 1px black;
    line-height:5em;
    padding:0 10px 2px 0;
    margin:2px 2px -1px 2px;
    text-decoration:none;
    color:black;
}

#mainnaviul a:hover {
    background:#ffff00;
}

#mainnaviul ul {
    [B]position:relative;[/B]
    width:100%;
    left:-9000px;
    
}

#mainnaviul li:hover ul {
   left: auto;
}

#mainnaviul li li {
    float: none;
    width:100%;
}

#mainnaviul li li a {
    display:block;
    background:#fff;
    text-align:left;
    line-height:1.89em;
    padding-left:7px;
    margin-top:0;
}

.dropdowntop {
/*Dient dazu dem Dropdownmenu einen oberen Abstand zur Mainnavi zugeben*/
    margin-top:2px;
}

#mainnaviul li li a:hover {
    color: #000;
}
    
#button5 a {
    background:url(images/Diverses.jpg) bottom left no-repeat #FFF;
}

#button4 a {
    background:url(images/shop.jpg) bottom left no-repeat #FFF;
}

#button3 a {
    background:url(images/580613_pc_support.jpg) bottom left no-repeat #FFF;
}

#button2 a {
    background:url(images/internetbeispiel.jpg) bottom left no-repeat #FFF;
}

#button1 a {
    background:url(images/start.jpg) bottom left no-repeat #fff;
}


/*--------------------------------- Ende ----------------------------------*/


/*------------------------------ C = Content ------------------------------*/

#content {
[COLOR=red][B]    [COLOR=black]margin:-180px 9px 0 10px;[/COLOR][/B][/COLOR]
    float:left;
    width:36%;
    background:#FFC;
    padding:10px;
}

...

<div id="mainnavi">
        <ul id="mainnaviul">
          <li id="button1"><a href="..." title="...">Home</a></li>
          <li id="button2"><a href="..." title="...">PC</a>
            <ul>
              <li class="dropdowntop"><a href="...">Reperaturen</a></li>
              <li><a href="...">test</a></li>
              <li><a href="...">test</a></li>
              <li><a href="...">test</a></li>
            </ul>
          </li>
          <li id="button3"><a href="...l" title="...">TV</a>
            <ul>
              <li class="dropdowntop" ><a href="...">test</a></li>
              <li><a href="...">test</a></li>
              <li><a href="...">test</a></li>
              <li><a href="...">test</a></li>
            </ul>
          </li>
          <li id="button4"><a href="" title="...">Shop</a></li>
          <li id="button5"><a href="...l" title="...">Diverses</a>
            <ul>
              <li class="dropdowntop"><a href="...">test</a></li>
              <li><a href="...">test</a></li>
              <li><a href="...">test</a></li>
              <li><a href="...">test</a></li>
            </ul>
          </li>
        </ul>
      </div>

grüsse webfan

 

[prm]

Füge das für den IE 7 noch zusätzlich ein:

*+html #mainnavi li:hover {
text-indent: 0;
}

 

[webfan]

super das hat geklappt, vielen dank für deine hilfe:)

jetzt habe ich noch das problem das das dropdown sich öffnet wen man mit der maus über die fläche fährt (also ich meine die ganze dropdown Fläche wie ausgeklappt) eigentlich sollte es sich ja nur öffnen wenn man mit der maus über den menu punkt fährt, so wen man von der navi auf der linken seite, mit der maus zum content in der mitte fährt, öffnet sich immer das dropdown menu.

wie kann ich dies den beheben?

grüsse webfan

 

[webfan]

ah ich habs raus


habe bei #navigationul ul {height 1px} gemacht, wer hätte das gedacht, logischerweise müsste doch dann das dropdownmenu nur noch 1 px hoch sein(?)