Learn VBA & Macros in 1 Week!

JavaScript - Drop Down Menu Working, But Not Firefox

Full Excel VBA Course - Beginner to Expert

Drop Down Menu Working, But Not Firefox	View Content

I'm was working on show and hide drop down menu and this works fine on IE, Google Chrome, Safari but not firefox. Can anyone explain to me one this is?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;

function mopen(eid) {
	//cancel the timer
	cancelTimer();
	
	//if there is a existing menu close it
	if(menu) menu.style.display='none';
	
	//now go about opening the current one
	var menu = document.getElementById(eid);
	menu.style.display='block';

}

function mclose() {
	menu.style.display='none';
}

function startTimer() {
	closetimer = window.setTimeout(mclose, timeout);
}

function cancelTimer() {
	if(closetimer) {
	window.clearTimeout(closetimer);
	closetimer = null;
	}
}
</script>
<style type="text/css">
body,html {
	background:#2E2D3B;
	font-family:Arial;
	font-size:0.9em;
}
div#menu {
	width:120px;
	height:auto;
	display:none;
	border-top:1px solid #cccccc;
	border-right:1px solid #cccccc;
	border-left:1px solid #cccccc;
	overflow:hidden;
	position:relative;
	top:3px;
}

a {
	color:#f1f1f1;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

#menu a {
	color:#111111;
	text-decoration:none;
}

#menu a:hover {
	color:#FF0000;
}

#menu ul {
	margin: 0;
	padding: 0;
}

#menu li {
	list-style:none;
	list-style-position:inside;
	list-style-type:none;
	padding:5px;
	background:#ffffff;
	border-bottom:1px solid #cccccc;
}

#menu li:hover {
	background:#f1f1f1;
}
</style>
</head>
	<body>
	<a href="javascript:;" onmouseover="mopen('menu');" onmouseout="startTimer();">Show Menu</a>
	<div id="menu">
	<ul onmouseover="cancelTimer();" onmouseout="startTimer();">
	  <li><a href="#">Page</a></li>
	  <li><a href="#">Page 1</a></li>
	  <li><a href="#">Page 2</a></li>
	  <li><a href="#">Page 3</a></li>
	  <li><a href="#">Page 4</a></li>
	  <li><a href="#">Page 5</a></li>
	 </ul>
     </div>	 
	
	</body>

</html>

And you can view it he http://idigteck.com

Thanks,
Jon W

Full Excel VBA Course - Beginner to Expert

Js Drop Down Menu Not Working With Ie7

Similar Tutorials

View Content

Thanks for looking, I am a novice.

Desi Drop down menu that works with IE7 & 8

Works with: MSIE6? andversions (that I have checked) of FF, Safari, Safari for iPhone

Page:
http://sfphotography.com/menu/test.html

All files:
http://sfphotography.com/menu/

Note, there are no linked pages, IE7 does not even show the option for selecting pages.

[code=html]
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import url(style2.css);
</style>

<body text="black" bgcolor="white" link="#a50921" vlink="#767676" background="">

<div align="center">
<ul><font size="2">
<li><a href="#">Rooms</a>
<ul>
<li><a href="queen.html">2 Queen / King</a></li>
<li><a href="family.html">Family Suite</a></li>
<li><a href="jacuzzi.html">Jacuzzi Suite</a></li>

</ul>
</li>
<li><a href="#">Rates</a>
<ul>
<li><a href="queen_.html">2 Queen / King</a></li>
<li><a href="family_.html">Family Suite</a></li>
<li><a href="jacuzzi_.html">Jacuzzi Suite</a></li>

</ul>
</li>
</font>
</ul>
[/code]

[code=javascript]
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
[/code]

[code=CSS]

body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #a50921; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
[/code]

Drop Down Menu Behind Flash Banner In Chrome And Firefox

Similar Tutorials

View Content

Hi All,

I'm sure I'm not the only one who has had this problem... In internet explorer I have no problems. I literally just taught myself flash so I am hoping there is an easy fix that I am not finding. I did not design or create the template for the original site, I am just upgrading and adding features to improve what was already there. I am trying to fix this as soon as possible so any help anyone could offer would be greatly appreciated!!

Here is the code for the flash banner:
Code:

    <td><div style="height:230px"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1090" height="230">
       <param name="movie" value="images/home/homeheader1.swf" />
       <param name="quality" value="high" />
       <embed src="images/home/homeheader1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1090" height="230"></embed>
     </object></div></td>
   </tr>

Here is the code for the nav bar:

Code:

<script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script>

<table id="m1mainSXMenu2" cellspacing="1" cellpadding="10"  style=";width:790px">
<tr style="text-align:center">
<td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td>
<td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='About Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">About Us</a></td>
<td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >Programs</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Getting Started';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Getting Started</a></td>

</tr>
</table>

Second Tier Of Double Drop Down Menu Not Working.

Similar Tutorials

View Content

I thought I was so cool combining both this shopping cart with the double drop down menu, but now my menu isnt working and I can't seem to trouble shoot my way through it anymore. I am sure I am missing just one small part because the page loads fine, but when I select an option from step three where it says "select a subject" it no longer loads the options into the subsequent drop down menu which reads "Pages appear here" (LoL at least I WISH they would appear there) Here is the code. I apologize for not making it smaller, but as I mentioned it is meshed with a shopping cart and I am not skilled enough to seperate my code.

Code:


<head>
<script language="javascript">

<!--//

//new Option("text","value")

//this code changes menus

function nullOptionsDMA(aMenu){
var tot=aMenu.options.length
for (i=0;i<tot;i++)
{
aMenu.options[i]=null
}
aMenu.options.length=0;
}
function MySubjectDMA0(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){ 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Drink Low/No Alcohol Beer","295");
options[2]=new Option("Drink Mixed Drinks","295");
options[3]=new Option("Buy Chewing Tobacco","295");
options[0].selected=true
}
}
function MySubjectDMA1(aMenu){

nullOptionsDMA(aMenu)

 

with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy Fine Jewelry,<$400","295");
options[2]=new Option("Buy Aerobic/Fitness Shoes, $50+","295");
options[3]=new Option("Dry Cleaning,$100+","295");
options[0].selected=true
}
}
function MySubjectDMA2(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Lease Most Recent Vehicle","295");
options[2]=new Option("Own/Lease New Vehicle","295");
options[3]=new Option("Own/Lease Used Vehicle","295");
options[0].selected=true
}
}


function MySubjectDMA3(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Has Satellite Dish","295");
options[2]=new Option("Watch Any Pay-per-View","100");
options[0].selected=true
}
}


function MySubjectDMA4(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Own Camcorder","295");
options[2]=new Option("Buy Any TV","295");
options[3]=new Option("Own 3+ Television Sets","295");
options[0].selected=true
}
}

function MySubjectDMA5(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Has Any Homeowner/Per Pr Insurance","295");
options[2]=new Option("Has Auto","295");
options[3]=new Option("Has Disability Insurance","295");
options[0].selected=true
}
}

function MySubjectDMA6(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Grocery Shop,4+ Times 1wk","295");
options[2]=new Option("Grocery Store, Travel 11+ Miles ","295");
options[0].selected=true
}
}
 

function MySubjectDMA7(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy Health/Beauty Products for Women,$100+","295");
options[2]=new Option("Go to the Doctor for Check-Ups","295");
options[3]=new Option("Use Hair Growth Products","295");
options[0].selected=true
}
}


function MySubjectDMA8(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy from Fast Food","295");
options[2]=new Option("Dine Out,1+ Times/wk","295");
options[3]=new Option("Dine Out,<1 Times/mo","295");
options[0].selected=true
}
}


function MySubjectDMA9(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Belong to a Church Board ","295");
options[2]=new Option("Belong to a Country Club ","100");
options[3]=new Option("Buy Any Children's Toys","295");
options[0].selected=true
}
}


function MySubjectDMA10(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Average Monthly Cell Phone Bill,$100+","295");
options[2]=new Option("Own Cell Phone ","295");
options[3]=new Option("Has Cell Phone for Business Use ","295");
options[0].selected=true
}
}

function MySubjectDMA11(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","0");
options[1]=new Option("Ads Keep Me Up-to-Date about Prods/Svcs I Want","295");
options[2]=new Option("Buy Based on Quality, Not Price","295");
options[3]=new Option("Choose Store b/c Store Personnel Service","295");
options[0].selected=true
}
}


function MySubjectDMA12(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","1650");
options[1]=new Option("Has Cooling Equipment, Heat Pump","1650");
options[2]=new Option("Has Heater System, Central Warm","1650");
options[3]=new Option("Has Heater System, Heat Pump ","1650");
options[0].selected=true
}
}

function MySubjectDMA13(aMenu){
nullOptionsDMA(aMenu)
 
with (aMenu){
 
//Rewrites the text and values
options[0]=new Option("Select a page","1650");
options[1]=new Option("Has Online Game Download Sub","1650");
options[2]=new Option("Has Online Movie Download Sub","1650");
options[3]=new Option("Has Online","1650");
options[0].selected=true
}
}



/* ####################### setUp100 ####################### */
 
function setUpDMA(){
with (document.orderform) {
if (menuSubjectsDMA.selectedIndex==0){
menuSubjectsDMA.options[0].selected=true
qty4.options[0].selected=true
}
if (menuSubjectsDMA.selectedIndex==1)
MySubjectDMA0(qty4)
if (menuSubjectsDMA.selectedIndex==2)
MySubjectDMA1(qty4)
if (menuSubjectsDMA.selectedIndex==3)
MySubjectDMA2(qty4)
if (menuSubjectsDMA.selectedIndex==4)
MySubjectDMA3(qty4)
if (menuSubjectsDMA.selectedIndex==5)
MySubjectDMA4(qty4)
if (menuSubjectsDMA.selectedIndex==6)
MySubjectDMA5(qty4)
if (menuSubjectsDMA.selectedIndex==7)
MySubjectDMA6(qty4)
if (menuSubjectsDMA.selectedIndex==8)
MySubjectDMA7(qty4)
if (menuSubjectsDMA.selectedIndex==9)
MySubjectDMA8(qty4)
if (menuSubjectsDMA.selectedIndex==10)
MySubjectDMA9(qty4)
if (menuSubjectsDMA.selectedIndex==11)
MySubjectDMA10(qty4)
if (menuSubjectsDMA.selectedIndex==12)
MySubjectDMA11(qty4)
if (menuSubjectsDMA.selectedIndex==13)
MySubjectDMA12(qty4)
if (menuSubjectsDMA.selectedIndex==14)
MySubjectDMA13(qty4)
}
}

/* ####################### changeFiles ####################### */
 
function changeFilesDMA(){
aMenu=document.orderform.menuSubjectsDMA
aMenu2=document.orderform.qty4
with (aMenu){
 
switch (selectedIndex) {
case 0:
aMenu2.options.length=0;
aMenu2.options[0]=
new Option("Pages appear here","0")
aMenu2.options[0].selected=true;
history.go(0)
break 
case 1: 
MySubjectDMA0(aMenu2) 
aMenu2.options[0].text="Drink Any Beer"
break 
case 2: 
MySubjectDMA1(aMenu2) 
aMenu2.options[0].text="Buy Costume Jewelry"
break 
case 3: 
MySubjectDMA2(aMenu2) 
aMenu2.options[0].text="Bought Most Recent Vehicle"
break 
case 4: 
MySubjectDMA3(aMenu2) 
aMenu2.options[0].text="Subscribe to Cable TV"
break
case 5: 
MySubjectDMA4(aMenu2) 
aMenu2.options[0].text="Buy Camera"
break 
case 6: 
MySubjectDMA5(aMenu2) 
aMenu2.options[0].text="Has Any Credit Card"
break 
case 7: 
MySubjectDMA6(aMenu2) 
aMenu2.options[0].text="Grocery Shopping spend $150+ 1wk"
break 
case 8: 
MySubjectDMA7(aMenu2) 
aMenu2.options[0].text="Buy Health/Beauty Products for Men,$100+"
break 
case 9: 
MySubjectDMA8(aMenu2) 
aMenu2.options[0].text="Buy from Any Fast Food Restaurant"
break 
case 10: 
MySubjectDMA9(aMenu2) 
aMenu2.options[0].text="Attend Classical/Opera perform.,1+ Times/mo"
break 
case 11: 
MySubjectDMA10(aMenu2) 
aMenu2.options[0].text="Average Monthly Cell Phone Bill,<$26"
break 
case 12: 
MySubjectDMA11(aMenu2) 
aMenu2.options[0].text="Ads Are More Manipulative Than Informative100"
break 
case 13: 
MySubjectDMA12(aMenu2) 
aMenu2.options[0].text="Has Cooling Equipment, Central Air"
break 
case 14: 
MySubjectDMA13(aMenu2) 
aMenu2.options[0].text="Has Wireless home network"
break 
}
}
}
//-->
</script>

<!-- ######## end copying code (DMA) from the HEAD ####### -->

<script>
<!--
function wopen(url, name, w, h)
{
// Fudge factors for window decoration space.
 // In my tests these work well on all platforms & browsers.
w += 32;
h += 96;
 var win = window.open(url,
  name, 
  'width=' + w + ', height=' + h + ', ' +
  'location=no, menubar=no, ' +
  'status=no, toolbar=no, scrollbars=no, resizable=no');
 win.resizeTo(w, h);
 win.focus();
}
// -->
</script> 


<SCRIPT SRC="language-en.js"></SCRIPT>
<SCRIPT SRC="nopcart.js">
</SCRIPT>





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

<BODY>

<table class="Global" cellpadding="0" cellspacing="0" border="0">
<tr><td height="117" colspan="2">

<!-- ============ Navbar Menu ============== -->
<table class="NavBar" style="height: 27px;" cellspacing="0" border="0"><tr><td>

<table class="NavBarMenu" style="height: 27px;" align="left" border="0" cellspacing="0"><tr>
<td><a href="index.html">Home</a>&nbsp;&nbsp; </td>
<td><a href="samples.html">Samples</a>&nbsp;&nbsp; </td>
<td><a href="ordering.html">Ordering</a>&nbsp;&nbsp; </td>
<td><a href="faq.html">F.A.Q.</a>&nbsp;&nbsp; </td>
<td><a href="contact.html">Contact</a></td>
</tr></table>

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

<div style="height: 1px; background: #000000;"><img src="images/space1x1.gif" width="1" height="1" alt="spacer"></div>


<noscript>
<p style="color:red">You appear to have Javascript disabled.  This page requires Javascript.  Please <a 

href="http://support.microsoft.com/gp/howtoscript" target="_blank">enable Javascript</a> and reload this page before 

continuing.</p>
</noscript>


<script language="JavaScript"> 
<!-- 
function CalculateTotals(){ 
f=document.orderform; 
f.total1.value=parseInt(f.qty1.value)*50; 
f.total2.value=parseInt(f.qty2.value)*((f.qty1.value)*10+10); 
f.total3.value=parseInt(f.qty3.value)*100; 
f.total4.value=parseInt(f.qty4.value)*1.2; 
f.grandtotal.value=parseInt(f.total1.value) 
+parseInt(f.total2.value) 
+parseInt(f.total3.value) 
+parseInt(f.total4.value) 
+parseInt(f.sh.value);} 
//--> 
</script></head> 
<body> 
<form name="orderform" method="post" action="formprocessor"> 
<table border="1" width="100%" cellpadding="4"><tr> 
<td colspan="2" align="center"><b>Step 1: Select what to include in your report</b><br><i>My report should...</i></td></tr>

<tr><td> 
Evaluate a radius of <select name="qty1" onchange="CalculateTotals()">
<option Selected value="0">5 miles
<option value="1">10 miles
<option value="2">15 miles
<option value="3">20 miles
</select>
 around <INPUT TYPE="text" NAME="Location" VALUE="Full Address OR Zipcode" SIZE="22" MAXLENGTH="45">
</td>
<td align="right"><input name="total1" size="7" 
OnFocus="document.orderform.qty2.select(); 
document.orderform.qty2.focus();" /></td></tr> 

<tr><td> 
<select name="qty2" onchange="CalculateTotals()">
<option Selected value="0">No
<option value="1">Yes
</select>
Include competitive analysis (<a href="whatis1.html" target="popup"
 onClick="wopen('whatis1.html', 'popup', 350, 450); return false;">what is this?</a>)
</td> 
<td align="right"><input name="total2" size="7" 
OnFocus="document.orderform.qty3.select(); 
document.orderform.qty3.focus();" /></td></tr> 

<tr><td> 
<select name="qty3" onchange="CalculateTotals()">
<option Selected value="0">No
<option value="1">Yes
</select>
Include target market report (<a href="whatis2.html" target="popup"
 onClick="wopen('whatis2.html', 'popup', 350, 450); return false;">what is this?</a>)
</td> 
<td align="right"><input name="total3" size="7" 
OnFocus="document.orderform.qty4.select(); 
document.orderform.qty4.focus();" /></td></tr>
 
</table><br><table border="1" width="100%" cellpadding="4">

<tr><td colspan="4" align="center">
<b>Step 2: Define your target market</b><br><i>The people I am looking for are...</i></td></tr>
<tr><td colspan="2">
Household Age</td><td colspan="2">
<select name="HHAge" onchange="CalculateTotals()">
<option Selected value="">Target Age
<option value="Less than 35">Less than 35
<option value="Less than 100">Less than 55
<option value="25to44">25-44
</select>
<tr><td colspan="2">
Average Household Education</td><td colspan="2">
<select name="HHEducation" onchange="CalculateTotals()">
<option Selected value="">Target Education
<option value="GradPlus">Graduate Plus
<option value="CollegeGrad">College Grad
</select><br>
<tr><td colspan="2">
Household Employment Type</td><td colspan="2"> 
<select name="HHEmployment" onchange="CalculateTotals()">
<option Selected value="">Target Employment
<option value="Management">Management
<option value="Professional">Professional
</select><br>
<tr><td colspan="2">
Household Ethnicity</td><td colspan="2"> 
<select name="HHEthnicity" onchange="CalculateTotals()">
<option Selected value="">Target Ethnicity
<option value="White">White
<option value="WhiteAsianMix">White, Asian, Mix
</select><br>
<tr><td colspan="2">
Household Composition</td><td colspan="2"> 
<select name="HHComposition" onchange="CalculateTotals()">
<option Selected value="">Target Age
<option value="HHwithKids">Household with kids
<option value="MostlywithKids">Mostly with kids
</select><br>
<tr><td colspan="2">
Household Income</td><td colspan="2"> 
<select name="HHIncome" onchange="CalculateTotals()">
<option Selected value="">Target Income
<option value="Wealthy">Wealthy
<option value="Upscale">Upscale
<option value="UpperMiddle">Upper Middle
<option value="Middle">Middle
<option value="LowerMid">Lower Middle
</select><br>
<tr><td colspan="2">
Household Tenure</td><td colspan="2"> 
<select name="HHTenure" onchange="CalculateTotals()">
<option Selected value="">Target Tenure
<option value="Homeowners">Homeowners
<option value="Renters">Renters
</select><br>

</td></tr>

</table><br><table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center"><b>Step 3: Add a specialty targeting criteria</b><br><i>I want people 

who...</i></td></tr><tr></td>
<tr><td>
<!-- This menu holds the subjects-->
<select name="menuSubjectsDMA" onChange="changeFilesDMA()" size="1">
<option value="0">Select a subject
<option value="">Alcohol & Tabacco $295
<option value="">Jewelry & Apparel $295
<option value="">Automotive $295
<option value="">TV Media $295
<option value="">Electronics & Internet $295
<option value="">Finance $295
<option value="">Grocery $295
<option value="">Health & Drugs $295
<option value="">Restaurants $295
<option value="">Sports & Leisure $295
<option value="">Telecommunications $295
<option value="">Consumer Behavior $295
<option value="">Home and Utilities $1980
<option value="">Home Technology $1980
</select>
</td><td colspan="2">
<!-- this menu holds the files to go-->
<select name="qty4" onChange="CalculateTotals()" style="width:200" size="1">
<option value="0">Pages appear here
</select>
<td align="right"><input name="total4" size="7" 
OnFocus="document.orderform.qty1.select(); 
document.orderform.qty1.focus();" /></td></tr> 
</td></tr>

</table><br>
<table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center"><b>Step 4: Tell us about your business</b><br><i>Customize my report for...</i></td></tr>
<tr><td>
<td align="right">Minimum Order:</td><td align="right">$200&nbsp;&nbsp;&nbsp;&nbsp;</td></tr> 
<tr><td></td><td></td> 
<td align="right"><b>GRAND TOTAL:</b></td> 
<td align="right"><input name="grandtotal" size="7" 
OnFocus="document.orderform.qty1.select(); 
document.orderform.qty1.focus();" /></td></tr> 
</table> 
<input type="hidden" value="5" name="sh" /> 
<br />
<center><input type="reset" value="Reset Form">
<input type="submit" value="Proceed to Checkout"> </center>

</form> 

<script language="JavaScript"> 
<!-- 
f=document.orderform; 
f.qty1.value=0; f.qty2.value=0; 
f.qty3.value=0; f.qty4.value=0;
f.total1.value=0; f.total2.value=0; 
f.total3.value=0; f.total4.value=0;
f.sh.value=200; 
f.grandtotal.value=200; 
//--> 
</script> 
</body></html>

<!-- ======= End Content ======== -->
</td></tr>

<!-- ======== Footer ========== -->
<tr><td colspan="2" class="Footer" style="vertical-align: middle;">

Copyright &copy; GrowthEdge &nbsp;&nbsp;&nbsp;
</td></tr></table>
</body>

</html>

I also check my email regularly if anyone has any comments or advice.

Drop Down Menu Not Working On Touch Screen Device Ipad

Similar Tutorials

View Content

Hi developers

Needing some help.

My javascript/css drop down menu is not working on the ipad or other touch screen devices. It works fine on laptops & desktops which use a mouse.

I've discovered that this is because touchscreen devices like the Ipad do not recognise the onmouseover/onmouseout event handler that my script relies on. Is there any way I can modify my script so that it is compatiable both with traditional devices and touchscreen devices?

The code I am using is:
<script type="text/javascript"></script>

Which drives the following html:

<ul id="links">

<li><a href="whats_new/whats_new.html">what's new</a></li>

<li><a href="#"

onmouseover="mopen('m1')"

onmouseout="mclosetime()">clothing</a>

<div id="m1"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="clothing/clothing_page1.html">clothing</a>

</div>

</li>

<li><a href="#"

onmouseover="mopen('m2')"

onmouseout="mclosetime()">accessories</a>

<div id="m2"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="bags/bags_page1.html">bags</a>

<a href="jewellery/jewellery_page1.html">jewellery</a>

</div>

</li>
</ul>

Any suggestions would be much appreciated.

Thank you.

Nonye

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

Similar Tutorials

View Content

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

View Content

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

Javascript Not Working With Firefox It Is Working Fine With Ie

Similar Tutorials

View Content

hereis the html file and javascripton click of this button a
html *****************************
<table class=matcolor id=topnav cellspacing=0
cellpadding=0 width=550 border=0 bgcolor="#FFCCCC">
<tbody>
<tr align=middle>
<td id=menu1
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Desk Top Publishing </font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu2
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Transcription</font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu3
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Accounts Processing </font></div>
</td>
</tr>
</tbody>
</table>
*****************************************

<script language=JavaScript>
ix = document.getElementById('tblmenu1').getBoundingClientRect();
new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10);
</script>
**any thing i have to alter to work in firefox
please help

Drop Down Menu

Similar Tutorials

View Content

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

Drop Down Menu Help

Similar Tutorials

View Content

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 Menu

Similar Tutorials

View Content

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

View Content

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

Help With Drop-down Menu

Similar Tutorials

View Content

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

View Content

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

Drop Down Menu

Similar Tutorials

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>

Drop Down Menu Help

Similar Tutorials

View Content

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;
}

Need Help With Drop Down Menu

Similar Tutorials

View Content

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

Similar Tutorials

View Content

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

Help With Drop-down Menu Please

Similar Tutorials

View Content

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!

How Do I Center A Drop Down Menu?

Similar Tutorials

View Content

Hi,

I want to center a javascript and CSS horizontal dropdown menu, How do I centre the bar I am using the stylesheet. www.weatherinaflash.com/CSS_files/styles.css

Please Help

Thanks

Random

Issues With Drop Down Menu

Similar Tutorials

View Content

Hi everyone. I'm pretty new to JS. I'm trying to make a drop down menu that hides the li's on load and then when the user clicks on the main li the sub li's appear. I also want to change the background color of this text on mouseOver. Having some trouble. Any help would be appreciated.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
    ul {
        list-style-type: none 
    }
    ul li {
        width: 300px 
    }
    a { 
        text-decoration: none; 
        padding: 8px; 
        margin: 5px; 
        font-family:Geneva, Arial, Helvetica, sans-serif; 
        color:#DA6712 
    }
    a:hover {
        font-weight:bold
    }

</style>
<script type="text/javascript" src="jquery-1.2.6(2).js"></script>
<script type="text/javascript">
    function showItems()
    {    
        getElementById(hidden1).style.backgroundColor = "#dddddd";
    }
        
    
    
    function hideItems()
    {
        
    }
    
    



          
    $(document).ready(function()
      {
              
               $('#hidden1,#hidden2').hide();
            $("ul").mouseover(showItems);
            $("ul").mouseout(hideItems); 
      });


</script>
</head>
<body>
<ul id="jsddm">
    <li><a href="#">JavaScript</a>
        <ul id="hidden1">
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Effect</a>
        <ul id="hidden2">
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Help</a></li>
</ul>
</body>
</html>