javascript - divhierarki

halloj, håller på med en liten meny i javascript....
trodde att jag skulle tycka att js var helsoft då jag kan c++, men är en del jag inte fattat än...

jag ska göra som så att då man har muspekaren över en länk så glider en meny fram under länken....

<div id="menuCol">
	<div id="topic">
		News
	</div>
	
	<div id="child">
		boo1<br/>boo1<br/>boo1<br/>boo1<br/>boo1<br/>
	</div>
</div>

menuCol är hela kolumnen, alltså både själva länken och menyn som glider fram....

jag kommer att ha onmouseover så att då jag för pekaren in i topiclagret eller över texten så ska "child" glida fram... den är annars dold...

Använder denna för att få fram min kolumn

document.getElementById("menuCol")

jag kommer sedan även ha flera kolumner med olika namn...
sedan vill jag få fram dess childs, i c++ hade jag gjort såhär:

document.getElementById("menuCol").getElementById("child").style.top = 433;

typ
Men så funkar det inte... har tittat på dynamic drive lite, men jag anser att nästan alla exempel bara är uppbyggda på fulkod osv... vill inte alls inspireras av dem

om någon vet bra sidor som visar alla roliga funktioner som finns, så bju mig gärna!

nej är det så??? ville ha flera med samma id, men deras parents id skiljer sig..... åh vad drygt...

för alla mina childs och topics har precis samma egenskaper och styleegenskaper, det är deras parent som skiljer sig bara... tyckte att det blev så fin och objektorienterad kod så

nytt problem, finns det några kända problem med att sätta style.top med javascript?
left fungerar skitbra men top reagerar inte... top fungerar bra i själva cssen....

<div id="menuCol">
		<div id="topic" onMouseover="pull2()">
			News
		</div>
		
		<div id="child">
			boo1<br/>boo1<br/>boo1<br/>boo1<br/>boo1<br/>
		</div>
	</div>


	var temp = document.getElementById("menuCol");
	//temp.style.left = 300;

	//document.write(temp.childNodes[3].id);
	temp.childNodes[3].top = "2px";
	temp.childNodes[3].style.left = "13 px";


	var temp2 = document.getElementById("child").style.top = 33;

klippte ur lite ur sammanhanget... mene... mja

EDIT: Problemet löst, scrolla ner!

mm, vet att det är lite cp, har experimenterat med allt möjligt, men glöm felkoden....

temp.childNodes[3].style.top = "13px";

- fungerar inte, trots att det funkar med.left

Alltså:

CSS:

#menuCol
{
	position:absolute;
	left:80px;
	top:20px;
	width: 80px;
	z-index:2;
}

#menuCol>#topic
{
	border: 2px solid black;
	z-index:1;
	background-color:rgb(40,400,40);
	width:100%;
}

#menuCol>#child
{
	border: 2px solid black;
	position:absolute;
	width:100%;
	top:20px;
	background-color:rgb(140,140,200);
	z-index:-10;
}

html

<div id="menuCol">
	<div id="topic" onMouseover="pull2()">
		News	
	</div>
		
	<div id="child">
		boo1<br/>boo1<br/>boo1<br/>boo1<br/>boo1<br/>
	</div>
</div>

JavaScript

var menuCol = document.getElementById("menuCol");
var child = menuCol.childNodes[3];

child.style.left = "12px";
child.style.top = "5px";

left fungerar asbra
ändrar jag top i cssen så fungerar det bra

btw, blabla.style.left, är det bara variabler man kan sätta? går det inte att ta värdena?! jag misslyckas iaf...

EDIT: Hittade problemet...
#menuCol>#child

om man tar bort #menuCol> så fungerar det... varför?
Jag är inte säker (har inspirerats av andra mm) men att sätta #menuCol> gör väl att jag skriver en style för ett objekt som ska vara ett child till menuCol?! Hmm.... mjaja... om någon kan förklara så är det välkommet

edit igen:
har lärt mig leva med problemet (tills vidare)... - men har fått ett nytt

var tal = child.style.top;
document.write(parseFloat(tal));

denna ger mig 0, oavsett vad jag har angivit i cssen... varför?

edit: skitsamma, det där systemet är uppenbarligen dåligt, löste sig med offsetTop och offsetLeft...