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-Code:
        <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 :
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

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