Problem med aligning av dropdown-meny

[exmx]

Jeg holder på å lage en dropdown meny basert på Son of Suckerfish

 

Jeg prøver å aligne den første submenyen etter slutten på topnivået.

 

Slik den ser ut nå:

 

 

Slik jeg vil ha den:

 

 

CSS-filen finner du HER.

JS-filen finner du HER.

 

Menyen består av en generert liste:

<ul id="nav">
 ...
 <li class="top">OM OSS
<ul>
  <li class="sub">Diverse_sub1</li>
  <li class="sub">Diverse_sub2</li>
  <li class="has_sub">Diverse_sub3
	<ul>
	  <li>Diverse_sub3_sub1</li>
	  ...
	</ul>
  </li>
</ul>
 </li>
 ...
</ul>

 

Er evig takknemlig hvis noen greier å hjelpe meg. Har sittet i flere dager med dette problemet :\

Endret 17. desember 2009 av exmx

[funkyboy]

Heisann!

 

Her er du nok nødt til å bruke position: relative og absolute. Husk at der du benytter position absolute, må parent- elementet ha position: relative for at ting skal kunne vises riktig. Altså kan du gjøre omtrent slik;

 

ul#hovedmeny li { position: relative; } 
/*
Relativ posisjonering uten å angi verdier for top, right, bottom eller left, forandrer i dette tilfellet ikke annet enn at det blir mulig å bruke position: absolute cross- browser- kompatibelt i child- elementer. 
*/

ul#hovedmeny li ul { position: absolute; right: 0; width: 30em;  z-index: 1; }  
/*
Z-index på denne bør være høyere enn z-index på parent- element. Parent har 0 som default dersom ikke angitt. Plasseres (0px) fra høyre.
*/

[exmx]

Med litt modifisering fikk jeg det til. TUSEN TUSEN TAKK!