JavaScript - Drop Down Menu Multiple Levels

hey

I have a page in which I already have a 3 level combox that works fine. I want to add to that page another combobox of 2 level.
When I tried to do it I find out that they control of each other. I tried changing the variables names. (changing "x" into "w" in the second combobox)
Well that worked. Can you please help me figure it out?

here is the end of the first form:


var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

function redirect2(z){
parent.mainframe.location=temp1[z].value;

and here is the end of the second combobox:

var temp=document.doublecombo.stage2A

function redirect(w){
for (n=temp.options.length-1;n>0;n--)
temp.options[n]=null
for (k=0;k<groupa[w].length;k++){
temp.options[k]=new Option(groupa[w][k].text,groupa[w][k].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex1].value
}



Thanks
Elad

http://www.javascriptkit.com/howto/drag.shtml

Has anyone modified this script to drag multiple items?

I am creating a quote calculator as a mobile app using the JQuery Mobile plugin in Dreamweaver CS5.5. This supports HTML5 & Javascript.

I have included a drop down list in which the user selects a specific Annual Volume. I have 2 different calculations that need to be done based on the users selection. Different calculations meaning that I need 2 different number values assigned to the option.

For Example:

Calculation #1 (I'm calculating what the Run Quantity is based on what the user selects as the Annual Volume. If user selects an Annual Volume of 150,000 then the calculated result for Run Quantity needs to be 3500)

HTML for this scenario:
Code:

<li data-role="fieldcontain">
    <p><span class="ui-listview-inset">Annual Volume:</label>
      <select name="annualvolume" id="annualvolume">
    
     onChange="Calculate();">
        <option value="1000">10,000</option>
        <option value="2000">30,000</option>
        <option value="3500">150,000</option>
        <option value="6000">300,000</option>
        <option value="10000">500,000</option>
        <option value="20000">1,000,000</option>
        </select>
    </p>
  </li>

Calculation #2 (within the same form as the above calculation, I also need to calculate what the Annual Sales will be. The math to calculate the Annual Sales is to multiply the Final Piece Price (which is another calculation within this form) with Annual Volume. However with this Calculation # 2 I need the value to be 150,000 when user selects 150,000 and NOT 3500 as it was before.

I've tried tweaking the HTML in following manner to assign 2 values within the same drop down, but it didn't work correctly.
Code:

<option value="3500" amount="150000">150,000</option>

My javascript is as follows (please note that I deleted all the result fields except for the 3 that reference my described calculations above. My actual calculator has over 20 results all based on the user's inputs. This is why there are so many variables listed in my javascript - they are for the other results)

Code:

<SCRIPT LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, materialtype, presstype, Etext, Ftext, annualvolume, annualvolume2,Htext, Itext, form)
{
//INPUTS
var A = parseFloat (Atext);
var B = parseFloat (Btext);
var C = document.getElementById('materialtype').value;
var D = document.getElementById('presstype').value;
var E = parseFloat (Etext);
var F = parseFloat (Ftext);
var G = document.getElementById('annualvolume').value;
var GA = document.getElementById('annualvolume').amount;
var H = parseFloat (Htext);
var I = parseFloat (Itext);

//RESULTS
form.RunQuantity.value = G
form.FinalPiecePrice.value = (((C*A) + F) + ((D/G) + E) + (((C*A) + F) + ((D/G) + E )) * (H *.01) + (((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01))
form.AnnualSales.value = (form.FinalPiecePrice.value * GA)
}

</script>

Currently I am simply having the user enter the annual volume twice so I can do the 2 calculations, but this is really clunky and not ideal.

I'm fairly new to Javascript but have learned a lot from reading other posts by people like you. This is the first thing I haven't been able to figure out on my own and any help would be greatly appreciated.

I have a page with multiple drop down menus for selecting a State then City, then Zip. The State and City both work fine but I can't seem to make the Zip function properly.

Page with drop downs:
Code:

var xmlhttp;
function showCity(state)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_cities.php";
url=url+"?q="+state;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
var s=state;
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}


var xmlhttp;

function showZip(city)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_zips.php";
url=url+"?z="+city;
url=url+"&q="+s;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtZip").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
<!--**********
state drop down
*********-->
<? $State = mysql_query("SELECT DISTINCT full_state FROM zip_codes ORDER by full_state",$db_link); ?>
<select name="state" CLASS="formTextbox" size="1"  onChange="showCity(this.value)">
<? while($get = mysql_fetch_array($State)) { ?>
<option value="<?=$get['full_state'];?>"><?=$get['full_state'];?></option><? } ?>
</select>

get_cities.php:
Code:

<?php
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $City = mysql_query("SELECT DISTINCT city FROM zip_codes WHERE full_state = '$q' ORDER BY city",$db_link); ?>
<select name="city" CLASS="formTextbox" size="1" onChange="showZip(this.value)">
<? while($get = mysql_fetch_array($City)) { ?>
<option value="<?=$get['city'];?>"><?=$get['city'];?></option><? } ?>
</select>

get_zips.php:
Code:

<?php
$z=$_GET["z"];
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $Zip = mysql_query("SELECT DISTINCT zip FROM zip_codes WHERE city = '$z' AND full_state = '$q' ORDER by zip",$db_link); ?>
<select name="zip" CLASS="formTextbox" size="1">
<? while($get = mysql_fetch_array($Zip)) { ?>
<option value="<?=$get['zip'];?>"><?=$get['zip'];?></option><? } ?>
</select>

I have my page set to only show the drop down's when there is a value to select. The Zip drop down shows up at the correct time but is empty.

I've tried searching the forum but since I'm still learning js I wasn't able to make use of any on the other multiple drop down examples I came accross.

Thanks for any advice you can offer.

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>

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!!

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

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.

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...

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!

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>

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

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

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

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">
<!--
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
-->
</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>&nbsp;</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>&nbsp; Latest Tour Details:</b></td>
</tr>

<!--
<tr>
<td align="left" border="0" cellpadding="10" cellspacing="10">
<br>
<b>Stick Men</b> March 2010 <br>
<b>Tony Levin, Pat Mastelotto, and Michael Bernier</b>

<br>
<br>
Mar 2 - Mexico City -Show
<br>
Mar 3 - Mexico City Show # 2 ( I've asked Val to verify local promoter!)
<br>
Mar 5 - Santiago Chile Show
<br>
Mar 7 - Cordoba Show
<br>
Mar 8 - Possible TLev clinic offer pending in Buenes Aires for + dollars (If so travel from Cordoba to BA; if not travel to Montevideo)
<br>
Mar 10 - Montevideo Show
<br>
Mar 11 - Rosario Argentina - Show
<br>
Mar 12 - Buenes Aires TBA - Show
<br>
Mar 14 - Caracas Show
<br>

</td>
</tr>
-->

<tr>
<td align="left" border="0" cellpadding="10" cellspacing="10">
<br>
<b>Eddie Jobson's UK &ndash; November</b> 2009 <br><br>
<i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Tony Levin, &amp; 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, &amp; 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, &amp; 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">

&nbsp;
<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>&trade;

&nbsp;PO Box 676 - Woodstock, NY 12498

&nbsp;<a href="mailto:rfrazza@yahoo.com" class="contact">robert@robertfrazza.com</a>
<br>
This web site ia a: &nbsp;<a href="mailto:nesbproject@yahoo.com" class="contact">NorthEast SoundBase project</a>&trade;
<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;
}