Try this if you want the drop down feature.
You can also view the source of any page and see how they made.
This isn't the exact way they made it but similar I think.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var blue_slideSpeed = 10; // Higher value = faster
var blue_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var blue_activeId = false;
var blue_slideInProgress = false;
function showHideContent(e,inputId)
{
if(blue_slideInProgress)return;
blue_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var showDiv = document.getElementById('blue_a' + numericId);
objectIdToSlideDown = false;
if(!showDiv.style.display || showDiv.style.display=='none'){
if(blue_activeId && blue_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(blue_activeId,(blue_slideSpeed*-1));
}else{
showDiv.style.display='block';
showDiv.style.visibility = 'visible';
slideContent(numericId,blue_slideSpeed);
}
}else{
slideContent(numericId,(blue_slideSpeed*-1));
blue_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('blue_a' + inputId);
var contentObj = document.getElementById('blue_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',blue_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('blue_a' + objectIdToSlideDown).style.display='block';
document.getElementById('blue_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,blue_slideSpeed);
}else{
blue_slideInProgress = false;
}
}else{
blue_activeId = inputId;
blue_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='blue_video'){
divs[no].onclick = showHideContent;
divs[no].id = 'blue_q'+divCounter;
var show = divs[no].nextSibling;
while(show && show.tagName!='DIV'){
show = show.nextSibling;
}
show.id = 'blue_a'+divCounter;
contentDiv = show.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='blue_show_content';
contentDiv.id = 'blue_ac' + divCounter;
show.style.display='none';
show.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<style type="text/css">
ul {
padding:0; margin:0; list-style-type:none; border:3px #000099 solid; background:#FFFF00; width:225px;
padding-left:5px;
}
#contain {
background-color:#00FF00;
color:#000000;
font-size:18px;
border:4px #FF0000 solid;
width:245px;
}
</style>
</head>
<body>
<div id="contain">
<div class="blue_video">Link 1</div>
<div class="blue_show">
<div>
<ul>
<li><a href="">Links you want to open but are hidden at first</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
</ul>
</div>
</div><div class="blue_video">Link 2</div>
<div class="blue_show">
<div>
<ul>
<li><a href="">Links you want to open but are hidden at first</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
</ul>
</div>
</div>
<div class="blue_video">Link 3</div>
<div class="blue_show">
<div>
<ul>
<li><a href="">Links you want to open but are hidden at first</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
</ul>
</div>
</div>
<div class="blue_video">Link 4</div>
<div class="blue_show">
<div>
<ul>
<li><a href="">Links you want to open but are hidden at first</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
<li><a href="">Links you want to open</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>