3 steps.. 2 make dis..
1st
HTML CodePASTE THE CODE IN YOUR MEDIA BOX.. 
HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.
Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:
- Code:
-
<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">EDIT DIS</a>
<a href="#">EDIT DIS</a>
<a href="#">EDIT DIS</a>
<a href="#">EDIT DIS</a>
<a href="#">EDIT DIS</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">EDIT DIS</a>
<a href="#">EDIT DIS</a>
<a href="#">EDIT DIS</a>
<a href="#">EDIT DIS</a>
</div>
</li>
<li><a href="#">EDIT DIS</a></li>
<li><a href="#">EDIT DIS</a></li>
<li><a href="#">EDIT DIS</a></li>
</ul>
<div style="clear:both"></div>
FAQ: - Quote :
- you must edit EDIT DIS with ur own.. dis part is d part that you can see the DROP DOWN MENU
CSS CODE paste t0 ur css section and edit the hex color...
- Code:
-
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
JS CODE paste and edit t0 ur EXT JS CODE..
- Code:
-
// Copyright 2006-2007 brattgurl
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
SAMPLE IMAGE
That’s it! All you have to do now is add some hover styles and make it your own. Enjoy! :midfinger:
f0r more c0des..???>>> CLICK ME
Subject: make ur 0wn dr0p down menu 
Tue Dec 11, 2007 10:12 am
