Learn VBA & Macros in 1 Week!

JavaScript - Drop Down Menu

Full Excel VBA Course - Beginner to Expert

Drop Down Menu	View Content

Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this:

HTML and Javascript included below.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

<link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="nav">

<li><a href="/home/">Home </a></li>
<li><a href="/products/">Products </a>

<ul>

<li><a href="/products/silverback/">Silverback </a></li>
<li><a href="/products/fontdeck/">Font Deck </a></li>

</ul>

</li>

<li><a href="/services/">Services </a>

<ul>

<li><a href="/services/design/">Design </a></li>
<li><a href="/services/development/">Development </a></li>
<li><a href="/services/ consultancy/">Consultancy </a></li>
</ul>

</li>

<li><a href="/contact/">Contact Us </a></li>

</ul>

</body>
</html>

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

How To Turn My Drop-down Menu, Into A Double Drop-down Menu?

How To Make A Drop Down Menu For A Menu

Need Help With Drop Down Menu

Drop Down Menu Help

Help With Drop-down Menu

Help With Drop-down Menu Please

Need Help With Drop-down Menu

Drop Down Menu Help

Need Help With Drop Down List Menu

Js Drop-down Menu - Trying To Improve

Drop Down Menu Problem

Drop-down Menu From Hotspot?

Drop Down Menu Problem

Drop Down Menu Info

Need Help With Drop Down Menu W/option Box.

Drop Down Menu Issue

Learn VBA & Macros for Excel in 1 Week!

How To Turn My Drop-down Menu, Into A Double Drop-down Menu?

Similar Tutorials

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!

Thank you for any help and/or advice in advance,
Best Regards,
Tim

How To Make A Drop Down Menu For A Menu

Similar Tutorials

? how would i make it for a menu so you could press it and it would go down to click on a link.

Drop-down Menu

Similar Tutorials

Hi,

Please look at the following drop-down menu:
http://www.w3schools.com/JS/tryit.as...yjs_selectmenu

1. How can I set it so the pages open in the parent frame (instead of the same frame)?
2. How can I set it so the pages open in a new window?

Regards
Rain Lover

Need Help With Drop Down Menu

Similar Tutorials

I presently have a drop down menu in one of my sites. I wish to break it down one more time so that it opens up on the side. However, not being a javascript expert I cannot figure out how to do it. I assume it is something within the coding that needs to be changed, or even a new section added. I have included the coding, please can someone point me in the right direction.

Thank you so much!

Monica

CODE:

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;
</SCRIPT>
<script type='text/javascript'>
$(function() {
$('#nav-drop').droppy();
});

SDDM:
#sddm
{ margin: 0;
padding: 0;
z-index: 300}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: 14px Arial, Helvetica, sans-serif}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 2px 6px;
width: 95px;
background: ##333366;
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background: #9F8469}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #333366;
border: 1px solid #FFFFFF}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #333366;
color: #FFFFFF;
font: 14px Arial, Helvetica, sans-serif}

#sddm div a:hover
{ background: #9F8469;
color: #FFFFFF}
.style12 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

HTML:
<tr>
<td height="21" colspan="3" bgcolor="#333366">
<ul id="sddm">
<li><a href="index.html" class="style18">HOME</a></li>
<li><a href="about_us.html" class="style18">ABOUT US</a></li>
<li><a href="criminal_law.html" class="style18"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">CRIMINAL LAW </a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="driving-impared_offences.html">Driving/Impaired Offences</a>
<a href="drug_related_chages.html">Drug Related Charges</a>
<a href="bail_hearing.html">Bail Hearing</a>
<a href="fraud_theft.html">Fraud/Theft</a>
<a href="assault.html">Assault</a>

would like to break this assault button down to 4 more options

<a href="domestic_violence.html">Domestic Violence</a>
<a href="break_enter_robbery.html">Break & Enter/Robbery</a>
<a href="weapons_offences.html">Weapons Offences</a>
<a href="fail_to_comply.html">Fail to Comply</a>
</div>
</li>
<li><a href="family_law.html" class="style18"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">FAMILY LAW</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="family_law_divorce.html">Divorce</a>
<a href="family_law_custody_access.html">Custody and Access</a>
<a href="child_spousal_support.html">Child/Spousal Support</a>
<a href="division_of_property.html">Division of Property</a>
<a href="restraining_orders.html">Restraining Orders</a>
<a href="cas_matters.html">CAS Matters</a>
<a href="paternity.html">Paternity</a>
<a href="adoptions.html">Adoptions</a>
<a href="premarital_cohapitation_separtion_agreements.html">Premarital/Cohabitation/Separation Agreements</a>
</div>
</li>
<li><a href="civil.html" class="style18"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">CIVIL LITIGATION</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="personal_injury.html">Personal Injury</a>
<a href="wrongful_dismissal.html">Wrongful Dismissal</a>
<a href="contract_disputes.html">Contract Disputes</a>
<a href="property_issue_discrepancies.html">Property/Issue Discrepancies</a>
<a href="tax_matters.html">Tax Matters</a>
</div>
</li>
<li><a href="wills.html" class="style18"
onmouseover="mopen('m5')"
onmouseout="mclosetime()">WILLS & ESTATES</a>
<div id="m5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="wills.html">Wills</a>
<a href="power_of_sale.html">Power of Sale</a>
<a href="power_of_attorney.html">Power of Attorney</a>
</div>
</li>
<li><a href="administrative_law.html" class="style18"
onmouseover="mopen('m6')"
onmouseout="mclosetime()">ADMINISTRATIVE LAW</a>
<div id="m6"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="board_tribunals.html">Board Tribunals</a>
<a href="omb.html">OMB</a>
<a href="rental_housing.html">Rental Housing</a>
<a href="licensing_tribunals.html">Licensing Tribunals</a>
<a href="ministry_challenges.html">Ministry Challenges</a>
<a href="consent_compassion_board.html">Consent and Compassion Board</a>
<a href="wsib.html">WSIB</a>
<a href="fisco.html">FISCO</a>
<a href="human_rights_commission.html">Human Rights Commission</a>
<a href="conversation_review_board.html">Conservation Review Board</a>
</div>
</li>
<li><a href="resources.html" class="style18">RESOURCES</a></li>
<li><a href="contact_us.html" class="style18">CONTACT US</a></li>
</ul>

Drop Down Menu Help

Similar Tutorials

I'm trying to make a simple drop down menu for the last item in the menu copied here. I've tried multiple free code on the web without success.
<li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta name="keywords" content="RF, producer, engineer, studio, touring, tours, live, managment, sound, mixing, editing, digital recording.
Tony Levin Band, Tony Levin, Jerry Marotta, Larry Fast, Pete Levin, Jesse Gress, Todd Rundgren, Bill Bruford, Earthworks, Earthworks Underground Orchestra,
BLUE, Joe Jackson, Lance Hoppen, Larry Hoppen, John Hall, Orleans, President Bill Clinton, ETHEL, ABBA's Arrival, ABBA the Tour, Anna Cheek, Jim Weider, The Band, Robbie Dupree, David Sancious, Woodstock, Water's of Eden,
BLUE nights, Pieces of the Sun, Resonator, LIARS DVD, Jesse Gress, John Ferenzik, Prairie Prince, Kasim Sulton, Michael Urbano, The Band 3, Joey Eppard, Chris Gartman, Joe Stote, UKZ, Stickmen, Adrian Belew,
Stickmen,Adrian Belew Power Trio, Julie Slick, Brian Slick, After Show Music, aftershowmusic.com.. ">
<meta name="description" content="Audio engineer, producer, manager RF's home page.
His tour schedule, latest news, audio samples, discography, photos, live sound, contact information. Gear used including Roland Digital Mixer, Bose Radiator Speakers,
Byerdynamic microphones, Shure, Apple computers, MacIntosh, Logic. Ongoing work with Tony Levin, Todd Rundgren Tour Dates, The ABBA Tour Dates, Bearsville Theatre, The Band 3, ABBA the Tour, Stickmen, UKZ, Adrian Belew, ...">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>drop down menu help</title>

<link href="style2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
</head>
<body>
<table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400">
<tr>
<td align="right" width="120" border="0">

<div id="tabs">
<ul>
<li></li>
<li><a href="index.htm"><span>Home</span></a></li>
<li><a href="rlive.html"><span>Live</span></a></li>
<li><a href="rdisc.html"><span>Discography</span></a></li>
<li><a href="rpress.html"><span>Press</span></a></li>
<li><a href="rarch.html"><span>Photos</span></a></li>
<li><a href="toursataglance.html"><span>Tours</span></a></li>
<li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li>
</ul>
</div>

</td>
</tr>
<td>

<table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400">
<tr>

<td><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><img src="n140899968868_3330.jpg" width="200" height="183" border="2"></a>
<br>
<br>
</td>
<td> </td>

<td><a href="MVI_4144AVI.html" target="MVI_4144.AVI" onClick="window.open('','MVI_4144.AVI', config='width=320, height=255, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')"><img src="LiveMix.jpg" alt="RF Live Mix pic click for video" width="320" height="240" border="1"></a>
</td>

</tr>

<br>
<br>
</table>
<table align="center" cellpadding="0" cellspacing="5" bgcolor="#444400" bordercolor="#B5A642" border="0" height="0">
<tr>
<td bgcolor="#B5A642" align="left" width="680"><b><i>Robert Frazza's</i>  Latest Tour Details:</b></td>
</tr>



<tr>
<td align="left" border="0" cellpadding="10" cellspacing="10">
<br>
<b>Eddie Jobson's UK – November</b> 2009 <br><br>
<i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Tony Levin, & John Wetton </i>
<br>
Nov. 3 - Studio Club - Krakow <br>
Nov. 4 - Palladium - Warsaw <br>
Nov. 5 - Filharmonia Pomorska - Bydgoszcz <br>
<br>
<i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Ric Fierabracci, & Adrian Belew </i>
<br>
Nov. 9 - Philharmonic Hall - Perm <br>
Nov.10 - B1 Maximum Club - Moscow <br>
<br>
<i>w /Edddie Jobson, Marco Minnemann, Greg Howe, & Ric Fierabracci </i>
<br>
<strike>Nov. 11 - Crossroads Live Club - Rome</strike>

<br>

</td>
</tr>

<tr>
<td align="left" border="0" cellpadding="10" cellspacing="10">

 
<br>

</td>
</tr>

</table>

<table align="center" cellpadding="3" cellspacing="3" bordercolor="B5A642" border="0" height="25">
<tr>
<br>
<br>
<td span class="contact"><a href="mailto:jen@robertfrazza.com" class="contact">Ashokan Talent Group</a>™

 PO Box 676 - Woodstock, NY 12498

 <a href="mailto:rfrazza@yahoo.com" class="contact">robert@robertfrazza.com</a>
<br>
This web site ia a:  <a href="mailto:nesbproject@yahoo.com" class="contact">NorthEast SoundBase project</a>™
<br>

<script language="JavaScript1.2">

document.write("This web site was last modified on: ", document.lastModified);

</script>
</span>
</td>
</tr>
</table>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11025875-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</td>
</tr>
</table>

</body>
</html>

This is the css -style2.css

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
background-color: #FFFFFF;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a:link {
text-decoration: none;
color: #997700;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #005588;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #005588;
font-weight: bold;
}
a:active {
text-decoration: none;
color: #000000;
}
.tba {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: bold;
}
.contact {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-weight: normal;
text-align: center;
}
a.contact {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
text-align: center;
}
a.contact:hover {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #858585;
font-weight: normal;
text-align: center;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#tabs {
float:left;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
margin-bottom:1em; /*margin between menu and rest of page*/
overflow:hidden;
}

#tabs ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;

}

#tabs li {
display:inline;
margin:0;
padding:0;
}

#tabs a {
float:left;
background:url("left.png") no-repeat left top;
margin:0;
padding:0 0 0 6px;
text-decoration:none;
}

#tabs a span {
float:left;
display:block;
background:url("right.png") no-repeat right top;
padding:6px 15px 4px 6px;
margin-right:2px;
color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
}

#tabs a:hover {
background-position:0% -42px;
}

#tabs a:hover span {
background-position:100% -42px;
}

Help With Drop-down Menu

Similar Tutorials

Here is the JS I used for a drop down nav bar from DW8. I need the cursor to become a hand when you scroll over one of the menu items. Can someone tell me what and where to change this. File attached...

Drop Down Menu

Similar Tutorials

Can anyone tell me how or point me to a tutorial which shows how to go about coding a drop down menu "without a button", where i can store all my links.
Thanks

Help With Drop-down Menu Please

Similar Tutorials

Having trouble with Nested Side Bar menu. I got the coding reference from here and tried to alter it for my profile.

http://www.dynamicdrive.com/style/cs...side_bar_menu/

I know there are easier ways to create menus like this with flash, but Im trying to learn with CSS,HTML, JAVASCRIPT.If there is anyone that can help me find an easier solution in how to do menus i would like to take your advice,

Basically I wanted to change the image on the button that receives the mouse-over. Then, when i place my mouse over the second button just sits idle with no sub-menu employed. Only the first button receives the commands to employ the sub-menu.

This is my Code.

**********************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link rel="stylesheet" type="text/css" href="4thcss.css">
<script src="4thport.js" type="text/javascript">
</script>

<title>Ruddy's Portfolio</title>
</head>
<body>

<div id="container">
<div id="containerbackground">
</div>

<div id="header">
</div>
<div id="headertitles">
<a href="https://www.google.com">CSS</a>
<a href="https://www.google.com">PHP</a>
<a href="https://www.google.com">HTML</a>
<a href="https://www.google.com">JAVASCRIPT</a>
<a href="https://www.google.com">MySQL</a>
</div>

<div id="content">

<p>Hello, this is my website page!<br>
Everything done here is by my <br>creative influence.<br>
I Hope that you enjoy!</p>
</div>

**********************************************************
**********************************************************
<div id="yellowbutton">
<div class="sidebarmenu">
<ul id="sidebarmenu1">

<li><a href="#"></a>
<ul>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
</ul>
</div>
</div>

<div id="redbutton">
<div class="sidebarmenu">
<ul id="sidebarmenu1">

<li><a href="#"></a>
<ul>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
</ul>
</div>
</div>
**********************************************************
**********************************************************
<div id="footer">
<div id="footernotes">

<p> A Website by Ruddy J. Woel</p>
</div></div>

</div>

</body>
</html>

CSS*******************************************************

body {
background-image:url(Pictures/forest2.jpg);
z-index:-1;
}

#container {
width: 860px;
margin: 0 auto;
height:700px;
}

#containerbackground {
background:#ffff99;
position:absolute;
top:32px;
width:800px;
height:700px;
opacity:0.8;
}

#header {
background:#009900;
position:absolute;
top:2px;
width:800px;
height:29px;
opacity:0.8;

}

#headertitles {
position:absolute;
top:1px;
padding-left:20px;
font-size:28px;
color:#FFFFFF;
font-family:Geneva, Arial, Helvetica, sans-serif;
word-spacing:65px;
opacity:0.9;
}

#content {
position:absolute;
top:70px;
left:280px;
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
opacity:0.8
}

#yellowbutton {
position:absolute;
top:200px;
left:260px;
}

.sidebarmenu ul{
margin: 0px;
padding: 0px;
list-style-type:none;
font: 18px Verdana;
width: 196px; /*main menu width*/
}

.sidebarmenu ul li{
position:relative;
width:197px; /*sub menu item widths*/
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
height:22px;
}

.sidebarmenu ul, .sidebarmenu ul li a:visited, .sidebarmenu{
background-image:url(Pictures/yellowbutton.gif); /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

/*Sub level menu items */
.sidebarmenu ul li ul,.sidebarmenu ul li ul a:visited{
background-image:url(Pictures/menudrop.gif);
position: absolute;
width: 175px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

#redbutton {
position:absolute;
top:235px;
left:260px;
z-index:1;
}

a {
text-decoration:none;
color:#FFFFFF;
word-spacing:40px;
}

#footer {

background-color:#000000;
position:absolute;
top:733px;
height:20px;
width:800px;
z-index:0;
opacity:0.8;
}

#footernotes {
margin-top:-10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
z-index:1;
color:#FFFFFF;
}

JAVASCRIPT*************************************************

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

*******************************************************

Thank you for your time!

Need Help With Drop-down Menu

Similar Tutorials

I have some Javascript code for a drop-down menu. The code works fine (will show below) but I was wondering how to turn off one of them? I have a total of 8 icons that have drop-down menus, but I only need 6 of them to do so. If I make any sort of change to the code, it makes all the icons change color when the mouse is hovered over, instead of drop-downs. It seems to be an "all or nothing" situation. Can someone show me how to "turn off" just one of the icons (say the "news" one), so a drop-down doesn't appear? Thank you very much.

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="javascript">
function init() {
	if (TransMenu.isSupported()) {
		TransMenu.initialize();		
		menu1.onactivate = function() { document.getElementById("news").className = "hover"; };
		menu1.ondeactivate = function() { document.getElementById("news").className = ""; };	
		menu2.onactivate = function() { document.getElementById("raceresults").className = "hover"; };
		menu2.ondeactivate = function() { document.getElementById("raceresults").className = ""; };
    }
}
</script>

<tr><td>
<a href="http://www.littlevalleyspeedway.com/test/news.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','http://www.littlevalleyspeedway.com/test/layout/nav_news_on.jpg',1)" id="news"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_news_off.jpg" border="0" name="news" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
<a href="http://www.littlevalleyspeedway.com/test/race_results.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navraceresults','','http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_on.jpg',1)" id="raceresults"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_off.jpg" border="0" name="navraceresults" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
</td></tr>

<script language="javascript">
if (TransMenu.isSupported()) {
	var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft);
	var menu1 = ms.addMenu(document.getElementById("news"));
	menu1.addItem();
	var menu2 = ms.addMenu(document.getElementById("raceresults"));
	menu2.addItem();
	TransMenu.renderAll();
}
</script>

Any help would be much appreciated!!

Drop Down Menu

Similar Tutorials

Hi Everyone,
Could someone please help?
I'm rewriting our website at present, and am quite ok with HTML and CSS, but am not particularly au fait with Javascript.

Here's the page I'm having a bit of trouble with:

http://www.ambersupplies.co.uk/thomas/miscellaneous.htm

If you look at the long button marked 'Diagnostics', you'll see it has an arrow and initiates a drop-down menu on mouse-over. My problem is that I wish to further subdivide the three items on the sub-menu, ie, Visual to become sub-menued into Dermatoscope and Penlight. In other words, the Visual button initiates another drop-down menu on mouse-over.

Basically, therefore, I'm trying to expand the Javascript to make this happen, but I just don't seem to able to.

I'd be so very grateful for any help anyone can offer.

Graham

Drop Down Menu

Similar Tutorials

Hi Everyone,
I'm trying to put a drop-down menu onto my website, but desperately need some help; I'd be so grateful if someone could offer some assistance.

If you click on this link to see the webpage, http://www.ambersupplies.co.uk/newsite/pageone.htm you'll see the drop down menu, and the two problems I'm having with it. Please don't take any notice of the menu content; I'll be styling it all when these problems are sorted.

Firstly, you'll see that the external drop down list is lying within the table (with the red background) when it should appear outside. I've obviously missed a closing table or td tag somewhere, but can't find it.
Secondly, the drop down menu should appear on mouseover, and disappear on mouseout; which it does, but as you can see, when the page is firstly or reloaded, the menu is showing.

I didn't write this drop-down menu code, I copied it from this page with the intention of styling it to my own webpage:
http://www.w3schools.com/DHTML/tryit...rydhtml_menu10, perhaps this will give someone a clue.

Can anyone shed a bit of light on this for me, please? I'd be really grateful for any help whatsoever.
Many thanks in advance.
Graham

Drop Down Menu Help

Similar Tutorials

i have done dropdown menu dynamic using php in which data fetched from database(mysql).now i've to do that if i'll choose any option from dropdown menu that particular item's rate will also fetch from data base and display in a text box.that value can also be changed.plzz help me .give some idea.

Need Help With Drop Down List Menu

Similar Tutorials

i need help on designing a drop down list menu. this rolls down and shows other list of options to click on. i work in dreamweaver so javascripts and others can be incorporated.
thanks all

Js Drop-down Menu - Trying To Improve

Similar Tutorials

I have a Javascript Dropdown Menu ( Code Below ), which is working nicely, but I want to improve it, but need help to so so.

When you hover over one of the dropdown's, it shows links to a page, I would like those links to also show more to the right...

For example;

1). Hover over 'Community', which shows the list of links below.
2). Hover over 'Connect With Us', will show another list to the right with links such as; 'Facebook', 'YouTube'......

The HTML Code;
Code:

<body>
<div class="chromestyle" id="chromemenu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#" rel="dropmenu1">Dropdown One</a></li>
		<li><a href="#" rel="dropmenu2">Dropdown 2s</a></li>
		<li><a href="#" rel="dropmenu3">Dropdown 3</a></li>	
	</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
	<a href="#">Link One</a>
	<a href="#">Link Two</a>
	<a href="#">Link Three</a>
	<a href="#">Link Four</a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
	<a href="#">Link One</a>
	<a href="#">Limk Two</a>
	<a href="#">Link Three</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
	<a href="#">Link One</a>
	<a href="#">Link Two</a>
	<a href="#">Link Three</a>
</div>

<script type="text/javascript">
	cssdropdown.startchrome("chromemenu")
</script>

</body>

The CSS Code;
Code:

.chromestyle{
	width: 1020px;
	font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.chromestyle ul{
	border: 1px solid #BBB;
	width: 100%;
	background: url(chromebg4.gif) center center repeat-x; /*THEME CHANGE HERE*/
	padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #E8BEBE; /*THEME CHANGE HERE*/
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg4-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
	position:absolute;
	top: 0;
	border: 1px solid #E8BEBE; /*THEME CHANGE HERE*/
	border-bottom-width: 0;
	font:normal 12px Verdana;
	line-height:18px;
	z-index:100;
	background-color: white;
	width: 200px;
	visibility: hidden;
}


.dropmenudiv a{
	width: 100%;
	display: block;
	text-indent: 3px;
	border: 1px solid #E8BEBE; /*THEME CHANGE HERE*/
	padding: 2px 0;
	text-decoration: none;
	font-weight: bold;
	color: black;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #FFECEC;
}

The Javascript Code;
Code:

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 5], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(what, offsettype){
	var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
	var parentEl=what.offsetParent;
	while (parentEl!=null){
		totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
		parentEl=parentEl.offsetParent;
	}
	return totaloffset;
},

css:function(el, targetclass, action){
	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
	if (action=="check")
		return needle.test(el.className)
	else if (action=="remove")
		el.className=el.className.replace(needle, "")
	else if (action=="add" && !needle.test(el.className))
		el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
	if (this.enablereveal[0]){
		if (!dropmenu._trueheight || dropmenu._trueheight<10)
			dropmenu._trueheight=dropmenu.offsetHeight
		clearTimeout(this.revealtimers[dropmenu.id])
		dropmenu.style.height=dropmenu._curheight=0
		dropmenu.style.overflow="hidden"
		dropmenu.style.visibility="visible"
		this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
	}
	else{
		dropmenu.style.visibility="visible"
	}
	this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
	var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
	if (curH<maxH){
		var newH=Math.min(curH, maxH)
		dropmenu.style.height=newH+"px"
		dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
	}
	else{ //if done revealing menu
		dropmenu.style.height="auto"
		dropmenu.style.overflow="hidden"
		clearInterval(this.revealtimers[dropmenu.id])
	}
},

clearbrowseredge:function(obj, whichedge){
	var edgeoffset=0
	if (whichedge=="rightedge"){
		var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
		var dropmenuW=this.dropmenuobj.offsetWidth
		if (windowedge-this.dropmenuobj.x < dropmenuW)  //move menu to the left?
			edgeoffset=dropmenuW-obj.offsetWidth
	}
	else{
		var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
		var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
		var dropmenuH=this.dropmenuobj._trueheight
		if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
			edgeoffset=dropmenuH+obj.offsetHeight
			if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
				edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
		}
	}
	return edgeoffset
},

dropit:function(obj, e, dropmenuID){
	if (this.dropmenuobj!=null) //hide previous menu
		this.hidemenu() //hide menu
	this.clearhidemenu()
	this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
	this.asscmenuitem=obj //reference associated menu item
	this.showmenu(this.dropmenuobj, e)
	this.dropmenuobj.x=this.getposOffset(obj, "left")
	this.dropmenuobj.y=this.getposOffset(obj, "top")
	this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
	this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
	this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
	if (this.iframeshimadded){
		if (this.dropmenuobj.style.visibility=="visible"){
			this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
			this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
			this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
			this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
			this.shimobject.style.display="block"
		}
	}
},

hideshim:function(){
	if (this.iframeshimadded)
		this.shimobject.style.display='none'
},

isContained:function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
},

dynamichide:function(m, e){
	if (!this.isContained(m, e)){
		this.delayhidemenu()
	}
},

delayhidemenu:function(){
	this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
	this.css(this.asscmenuitem, "selected", "remove")
	this.dropmenuobj.style.visibility='hidden'
	this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
	this.hideshim()
},

clearhidemenu:function(){
	if (this.delayhide!="undefined")
		clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
	if (target.addEventListener)
		target.addEventListener(tasktype, functionref, false);
	else if (target.attachEvent)
		target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
	if (!this.domsupport)
		return
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	for (var ids=0; ids<arguments.length; ids++){
		var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
		for (var i=0; i<menuitems.length; i++){
			if (menuitems[i].getAttribute("rel")){
				var relvalue=menuitems[i].getAttribute("rel")
				var asscdropdownmenu=document.getElementById(relvalue)
				this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
				this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
				this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
				try{
					menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
				}catch(e){}
				this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
					if (!cssdropdown.isContained(this, e)){
						var evtobj=window.event || e
						cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
					}
				}, "mouseover")
				this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
				this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
			}
		} //end inner for
	} //end outer for
	if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
		document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
		this.shimobject=document.getElementById("iframeshim") //reference iframe object
		this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
		this.iframeshimadded=true
	}
} //end startchrome

}

Thank you in advance,
Tim

Drop Down Menu Problem

Similar Tutorials

hey im newish to javascript.

ive completely handwritten this script, based on a working drop down menu script i had. this new script is supposed to incorporate the menu 'rolling' down. this is based on pixel increment by time.
problems with the code:

doesnt work at all with ie, only FF
can only open one menu item per refresh of page
when you go to click on a menu sub-item the menu disappears as soon as your mouse leaves the first header link.

didnt have any of these problems with the basic drop down menu this is based on.

so heres the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div, a, ul, li, body,  {padding:0;margin:0; text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
li {font-size: 15px;}

body{margin:0;}

#container {width:800px; margin: 0 auto; font-family:Tahoma, Geneva, sans-serif;}

.drop {overflow: hidden; width: 180px; height: 20px; float: left; background: #f1f1f1; display: block; list-style:none; padding: 5px 10px; opacity: 0.9; filter: alpha(opacity=90); border-bottom: 1px solid blue;margin: 0;}
.menuItemHolder {width: 200px; height: 20px; float:left;}
.topLi {margin-bottom: 10px; text-align: center; font-size: 16px;}
.relDiv {border: 1px solid green; background: blue; color: #fff;}

#nav-container {height: 30px; margin: 0;}

/*THIS BIT SHOULD BE UNCOVERED IF USING 6 MENU ITEMS, (instead of 5)*/
.menuItemHolder {width: 160px;}
.drop {width: 140px;}

</style>

<script type="text/javascript">
height=20; //set initial height of top menu links
var timer_is_on=0; //set timer value to 0 (off)

function dropper(dropN)
{
menu = document.getElementById(dropN); //select menu to open

var links=menu.innerHTML; //select link holder
numLinks=(links.split("</li>").length-1); //calculate number of links in each link holder

height++; //increase value of height by '1' each time
maxHeight=10+(numLinks*18); //calculate height of expanded Li holder
   if (height<=maxHeight) //code to run if menu is fully extended
	{
	menu.style.height=height+"px"; //reformat for pixel declaration
	menu.style.position = "absolute"; //change menu to absolutely positioned
	setTimeout("dropper("+dropN+")",10); //call function from within itself after 10 miliseconds
	}
   else
	{
	}
}

function doTimer(dropN)
{
   if (!timer_is_on) //check if timer is set, if not, set it and redirect
	{
	timer_is_on=1;
	dropper(dropN); //redirect to the function to bring the menu down
	}
}

function backup(dropN)
{
menu = document.getElementById(dropN); //select menu to close
menu.style.height = '20px'; //change to closed height (height of first link only)
height=20; //change height variable back to 20
var timer_is_on=0; //reset time set variable to 0
}
</script>
</head>

<body>
    <div id="nav-container">
		<div class="menuItemHolder">
		<ul id="1" class="drop" onMouseOver="doTimer('1');" onMouseOut="backup('1');">
			<li class="topLi"><a href="#">Top bit</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
		</ul>
		</div>

		<div class="menuItemHolder">
		<ul id="2" class="drop" onMouseOver="doTimer('2');" onMouseOut="backup('2');">
			<li class="topLi"><a href="#" class="topLi">Longer Top bit</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 2</a></li>
		</ul>
		</div>
</body>
</html>

any help much appreciated

Drop-down Menu From Hotspot?

Similar Tutorials

Hi there
I was wondering if it's possible to build a js drop down menu which pops out below an image's hotspot link. I guess there is but... Anyway if someone knows any location where i can find a sample code of this it'd be really nice

Thanks

Drop Down Menu Problem

Similar Tutorials

Hi there. I recently put a news ticker on my work's homepage and it works fine. The only problem is that the drop-down menus above it are appearing behind the news ticker. I tried trouble-shooting for the last couple days to no avail. I am hoping someone might be able to give me some hints or a way to resolve this. Here is a link to the beta page, and below is the newsticker javascript I used. This is my first time posting here and I'm really new to the world of scripting so please let me know if there is anything else you might need to help me crack this thing. Thanks to everyone in advance.

Code:

// Create namespace
if (at == undefined) var at = {};
if (at.bartelme == undefined) at.bartelme = {};

// Newsticker Class
at.bartelme.newsticker = Class.create();
at.bartelme.newsticker.prototype = {
	initialize: function()
	{
		// Get elements
		this.interval = 10000;
		this.container = $("newsticker");
		this.messages  = $A(this.container.getElementsByTagName("li"));
		this.number_of_messages = this.messages.length;
		if (this.number_of_messages == 0)
		{
			this.showError();
			return false;
		}
		this.current_message = 0;
		this.previous_message = null;
		// Create toggle button
		this.toggle_button = document.createElement("a");
		this.toggle_button.href = "#";
		this.toggle_button.id = "togglenewsticker";
		this.toggle_button.innerHTML = "Toggle";
		Event.observe(this.toggle_button, "click", this.toggle.bindAsEventListener(this), false);
		
		this.hideMessages();
		this.showMessage();
		// Install timer
		this.timer = setInterval(this.showMessage.bind(this), this.interval);
  	},
	showMessage: function()
	{
		Effect.Appear(this.messages[this.current_message]);
		setTimeout(this.fadeMessage.bind(this), this.interval-2000);
		if (this.current_message < this.number_of_messages-1)
		{
			this.previous_message = this.current_message;
			this.current_message = this.current_message + 1;
		} else {
			this.current_message = 0;
			this.previous_message = this.number_of_messages - 1;
		}
	},
	fadeMessage: function()
	{
		Effect.Fade(this.messages[this.previous_message]);
	},
	hideMessages: function()
	{
		this.messages.each(function(message)
		{
			Element.hide(message);
		})
	},
	toggle: function()
	{
		Effect.BlindUp(this.container, 1000);
	},
	showError: function()
	{
		if (this.container.getElementsByTagName("ul").length == 0)
		{
			this.list = document.createElement("ul");
			this.container.appendChild(this.list);
		} else {
			this.list = this.container.getElementsByTagName("ul")[0];
		}
		this.errorMessage = document.createElement("li");
		this.errorMessage.className = "error";
		this.errorMessage.innerHTML = "Could not retrieve data";
		this.list.appendChild(this.errorMessage);
	}
}

Event.observe(window, "load", function(){new at.bartelme.newsticker()}, false);

Drop Down Menu Info

Similar Tutorials

Hello everyone

I would like to understand how can I do a drop down many exactly as the www.oracle.com webpage. The idea is to build some kind of menu in my web project. I know that this could be a noob question for some, thank you anyeway for any help in advanced.

Renzo ++

Need Help With Drop Down Menu W/option Box.

Similar Tutorials

Drop Down Menu Issue

Similar Tutorials

New to Javascript and been reading a lot of tutorials on the various things im trying to do with my website. One thing i cant figure out is my my menu doesnt dropdown as I want to have sublinks. I know this all has to do with my style.css. Here is the code I have, cant figure out where I got this wrong.

[CODE]
.menu {width:100%; height:67px; background:url(images/tail-menu.gif) 0 0 repeat-x #f00;}
.menu li {float:left; font-size:1.333em; line-height:1.5em; text-transform:uppercase;}
.menu li a {display:block; padding:21px 27px 22px 27px; color:#818080;}
.menu li .active, .menu li a:hover {color:#fffefe; background:#f31301;}
.menu .last-item a {padding:21px 32px 22px 27px; }
.menu li span {width:100%; height:67px; background:url(images/tail-menu.gif); no-repeat center top;float: left}
.menu li span.subhover {background-position: center bottom; cursor: pointer;}
.menu li ul.subnav {list-style: none; position: absolute; left:0; top:35px; background:#f31301; margin:0; padding:0; width:170px;float:left; display:none; border: 1px solid #111}
.menu li ul.subnav li{margin:0; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 100%;}
[CODE]

Any help is greatly appreciated.