Javascript 
Menus Drop Down Black Menu
Menus Drop Down Black Menu Menus Drop Down Black Menu
Attention, this section links the HTML with CSS and scripts, if you change the name of the folders or name files your menu will not work.
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="scripts/mootools.js"> </script>
<script type="text/javascript" src="scripts/mootools-plugins.js"> </script>
<script type="text/javascript" src="scripts/dropdown-compressed.js"> </script>
<script type="text/javascript">
new UvumiDropdown('nav');
</script>
<div id="demo_area">
<div id="left_col">
<div id="dropdown-holder">
<ul id="nav" class="dropdown">
<li class="heading"><a href="#home">Home</a>
<ul>
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#" class="popout">Home 3</a>
<ul>
<li><a href="#">Home 7</a></li>
<li><a href="#">Home 8</a></li>
<li><a href="#">Home 9</a></li>
<li><a href="#" class="popout">Home 10</a>
<ul>
<li><a href="#">Home 12</a></li>
<li><a href="#">Home 13</a></li>
<li><a href="#">Home 14</a></li>
<li><a href="#">Home 15</a></li>
<li><a href="#">Home 16</a></li>
</ul>
</li>
<li><a href="#">Home 11</a></li>
</ul>
</li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
</ul>
</li>
<li class="heading"><a href="#home">Tools</a>
<ul>
<li><a href="#">Tools 1</a></li>
<li><a href="#">Tools 2</a></li>
<li><a href="#" class="popout">Tools 3</a>
<ul>
<li><a href="#">Tools 7</a></li>
<li><a href="#">Tools 8</a></li>
<li><a href="#">Tools 9</a></li>
<li><a href="#" class="popout">Tools 10</a>
<ul>
<li><a href="#">Tools 12</a></li>
<li><a href="#">Tools 13</a></li>
<li><a href="#">Tools 14</a></li>
<li><a href="#">Tools 15</a></li>
<li><a href="#">Tools 16</a></li>
</ul>
</li>
<li><a href="#">Tools 11</a></li>
</ul>
</li>
<li><a href="#">Tools 4</a></li>
<li><a href="#">Tools 5</a></li>
</ul>
</li>
<li class="heading"><a href="#home">Options</a>
<ul>
<li><a href="#">Options 1</a></li>
<li><a href="#">Options 2</a></li>
<li><a href="#" class="popout">Options 3</a>
<ul>
<li><a href="#">Options 7</a></li>
<li><a href="#">Options 8</a></li>
<li><a href="#">Options 9</a></li>
<li><a href="#" class="popout">Options 10</a>
<ul>
<li><a href="#">Options 12</a></li>
<li><a href="#">Options 13</a></li>
<li><a href="#">Options 14</a></li>
<li><a href="#">Options 15</a></li>
<li><a href="#">Options 16</a></li>
</ul>
</li>
<li><a href="#">Options 11</a></li>
</ul>
</li>
<li><a href="#">Options 4</a></li>
<li><a href="#">Options 5</a></li>
</ul>
</li>
<li class="heading"><a href="#home">Last</a>
<ul>
<li><a href="#">Last 1</a></li>
<li><a href="#">Last 2</a></li>
<li><a href="#" class="popout">Last 3</a>
<ul>
<li><a href="#">Last 7</a></li>
<li><a href="#">Last 8</a></li>
<li><a href="#">Last 9</a></li>
<li><a href="#" class="popout">Last 10</a>
<ul>
<li><a href="#">Last 12</a></li>
<li><a href="#">Last 13</a></li>
<li><a href="#">Last 14</a></li>
<li><a href="#">Last 15</a></li>
<li><a href="#">Last 16</a></li>
</ul>
</li>
<li><a href="#">Last 11</a></li>
</ul>
</li>
<li><a href="#">Last 4</a></li>
<li><a href="#">Last 5</a></li>
</ul>
</li>
</ul>
<div class="clear"> </div>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
body {
background:url(images/bg.png) repeat top center;
padding: 0px;
margin: 0px;
color:#fff;
font-size: 13px;
line-height: 18px;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
#dropdown-holder {
/*
This is just the holder and how you want what is behind the
main menu links too look like
*/
width: 458px;
background-color:#000000;
padding-left:10px;
margin:50px 0 0 50px;
}
.dropdown {
/*
OVER ALL LINE HEIGHT
*/
line-height:32px;
}
.dropdown a {
/* The minimum width of the "MAIN" links on top */
min-width: 90px;
font-family: helvetica, verdana, tahoma, arial;
text-transform: uppercase;
font-size: 16px;
display:block;
padding:0px 10px 0px 10px;
color:#fff;
text-decoration:none;
}
.dropdown a:hover{
color: #00ccff;
background-color: #121212;
}
.dropdown ul {
top:32px;
}
.dropdown li ul a{
/* The width of the dropdown and popout menu */
width:125px;
background-color:#0a0a0a;
/*
Optional thought i'd make the drop down and popout transparent
This line is also what is killing the CSS validation
*/
filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;
}
.dropdown li ul {
border-top: solid 1px #333333;
/* time for some math {a}:width + {a}:padding + {a}:border */
width:147px;
}
.dropdown li ul li{
/* time for some math {a}:width + {a}:padding + {a}:border */
width:147px;
}
.dropdown li ul li a{
border-bottom: solid 1px #000000;
border-top: solid 1px #333333;
border-left: solid 1px #000000;
border-right: solid 1px #333333;
}
.dropdown a.popout {
/* totally optional popout indicator */
background-image: url(../images/popout.gif);
background-position:center right;
background-repeat:no-repeat;
}
/************************************************************
ONLY EDIT BELOW IF YOU REALLY KNOW WHAT YOUR DOING!
************************************************************/
.dropdown {
margin:0;
padding:0;
list-style-type:none;
}
.dropdown ul{
margin:0;
padding:0;
list-style-type:none;
}
.dropdown a {
display:block;
}
.dropdown li{
float:left;
position:relative;
display: block;
}
.dropdown ul {
position:absolute;
display:none;
}
.dropdown li ul a{
float:left;
}
.dropdown li ul {
float:left;
}
.dropdown li ul li{
float:left;
position:relative;
}
.dropdown ul ul{
top:0;
left:100%;
}
.dropdown li ul ul {
width:auto;
margin: -1px 0px 0px 0px;
float:left;
}
.dropdown li:hover ul ul, .dropdown li:hover ul ul ul, .dropdown li:hover ul ul ul ul{
display:none;
}
.dropdown li:hover ul, .dropdown li li:hover ul, .dropdown li li li:hover ul, .dropdown li li li li:hover ul{
display:block;
}
