Popout Menü richtet sich an Inhalt de <li> elements aus... soll es aber nicht

FunkFlex

Mitglied
Hallo,
ich habe ein popout menü gebastelt, funktioniert soweit auch ganz gut,
aber das popout menü richtet sich am Inhalt des <li> Elements aus, was es aber nicht soll.
Die Position des Popouts soll also nicht Inhaltsabhängig sein, da in einem <li> Element mehr, im anderen weniger steht, kann mir da jemand vlt helfen?

hier HTML
HTML:
        <div id="contentnavigation">      
        <ul id="contentmenue">
          <li class="abstand"><a href="#"><img src="bildmaske.png" /></a> <br />
            <b>punkt1</b><br />
             invidunt ut labore et dolore magna aliquyam er</li>
             
             <li class="abstand"><a href="#"><img src="bildmaske.png" /></a><br />
             <b>Punkt2</b><br />
             invidunt ut labore et dolore magna aliquyam er</li>
               
             <li class="abstand"><a href="#"><img src="bildmaske.png" /></a><br />
             <b>Punkt3</b><br />
             invidunt ut labore et dolore magna aliquyam er</li>
               
             <li class="abstand"><a href="#"><img src="bildmaske.png" /></a><br />
            <b>Punkt4t</b><br />
             invidunt ut labore et dolore magna aliquyam er
invidunt ut labore et dolore magna aliquyam er</li>               
           </ul>
         </div>

hier css
Code:
ul#contentmenue{
    margin-left:1px;
  position:absolute;
  padding: 0 0 0 0;
  top:140px;
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:14px;
  z-index:7;
  height:200px;
  
}

ul#contentmenue li{
  display:inline;
  float:left;
  list-style-type:none;
  width:183px;
  height:200px;
 position:relative;
  /*margin-left:*/
  padding: 0 0 0 0;
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:14px;

}

ul#contenmenue li a {
  text-decoration:none;
  color:#000;
  padding: 0 0 0 0;
   font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:14px;
    width:183px;
  height:200px;
  position:relative;

}

ul#contentmenue .abstand{
    margin-right:12px;
  position:relative;
    width:183px;
  height:200px;

}




ul#contentmenue li ul{
  display:none;
  position:relative;
  z-index:10;
  
}

ul#contentmenue li:hover ul{
  display:block;
  position:relative;
  width:170px;
  height:75px;
  clear:both;
  top:-154px;
  left:190px;
  z-index:10;
  
}  

ul#contentmenue li ul li{
  position:relative;
  display:block;
  left:-1px;
  top:5px;
  line-height:20px;
  height:20px;
  width:170px;
  background-color:#99cc19;
  border-bottom:1px dotted;
  border-left:none;
  border-right:none;
  border-top:none;
  border-color:#FFF;
}


ul#contentmenue li ul li a{
  text-decoration:none;
  list-style-type:none;
  font-size:12px;
  line-height:20px;
  height:20px;
  color:#FFF;
  margin-left:10px;
}

#popup {
  position:relative;
  background-image:url("../images/produktpopupcut.png");
  background-repeat:no-repeat;
  clear:both;
  width:222px;
  height:75px;
  top:-150px;
  left:150px;
}

Vielleicht kann mir ja jemand helfen, weil irgendwie funktionieren meine versuche nicht, das Problem zu lösen...

Danke schonmal.

Gruß Funkflex
 
Zurück