JavaScript - Navigation Menu Problem

I have a navigation menu.
When you mouseover, there's a sub-menu that appears. It remaining until you mouseout from the submenu or that "top level" item you mousedover in the first place.

I want to change the mouseout function so it does nothing until you mousover another top-level item in the navigation.

Example Shown he http://www.courage.ca

Code:

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;

Okay, I'll try to give as much detail on what I'm trying to do here and please correct me if this is not possible to do using javascript. Let's say you have 3 files:
document.html = the page where all this is displayed
menu.js = the script that will read the menufile.txt and parse it into a navigation menu
menufile.txt = content of the menu that will be parsed

The idea here is that when the website grows, I want a simple way of updating the menu for all the pages without going and doing it page by page.

The content of menufile.txt will look like this:
+Menu Item1 "Link1"
-SubMenu Item1 "Link2"
-SubMenu Item2 "Link3"
+Menu Item2 "Link4"

Each link corresponds to the item before it as you can see, and I'm using + to signify a main menu item while - signifies a submenu item. The logic I can see for doing this is reading the whole file into an array, then going through the array searching for + or - and breaking the line into pieces.

Take the first line for example:
+Menu Item1 "Link1"
This is broken into 3 variables:
+ -> is the what tells me if it's a main menu item or a sub menu item
Menu Item1 -> is the name i want put into a variable
"Link1" -> This is the link variable for the page associated with the item, this could be left blank if there is no link available to the corresponding item.

So to sum it up, I'm reading the file link by line, breaking it into 3 variables. But I am not that experienced with javascript and don't know how I can go about doing that or if it's even possible.

Thank you in advance for taking the time to read this. If you need more clarification on anything I mentioned please let me know, I'll be glad to elaborate.

Hello everyone,

For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript:

Code:

$(function(){

    var config = {    
         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
         interval: 200,  // number = milliseconds for onMouseOver polling interval    
         over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         timeout: 200,   // number = milliseconds delay before onMouseOut    
         out: doClose    // function = onMouseOut callback (REQUIRED)    
    };
    
    function doOpen() {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }
 
    function doClose() {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("ul.pMenu li").hoverIntent(config);
    
    $("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");

});

My css that corresponds to this is:

Code:

.pMenu{
	margin:0;
	padding:0;
}

#health{
	width:10%;
	padding-left:14%;
	padding-right:2%;
}

#insurance{
	width:13%;
	padding-right:2%;
}

#shopping{
	width:12%;	
	padding-right:2%;
}

#dating{
	width:10%;
	padding-right:2%;
}

#education{
	width:13%;
}

ul.pMenu li{
	float:left;
	list-style:none;
}

ul.pMenu li a{
	display:block;
	color:#FFF;
	background:#900;
	border:3px ridge #C00;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	white-space:nowrap;
	padding-left:2%;
	padding-right:2%;
	padding-top:10px;
	padding-bottom:10px;
}

ul.pMenu li a:hover{
	background:#FF0;
	border:3px ridge #FF6;
	color:#FF0;
}

ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li a{
	width:auto;
	background:#CCC;
	border:1% outset #999;
	font-size:95%;
	padding:2%;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	border-right:none;
	width:100%;
	display:inline-block;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

So here is the code I use:
Code:

$('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = decodeURIComponent(document.location.href);
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = decodeURIComponent(document.location.href);
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
                        //$('a', $('.active').parents("li:last")).addClass('active');		                   
             	        $(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):
Code:

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.

Please help.

Hi,

I created a simple menu:

Code:

<html>

<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>

<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>

<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>

<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>

<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>

</tr>
</tbody>
</table>
</body>

</html>

Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on.


Regards
Rain Lover

Hi guys! I'm having trouble deciphering the javascript on my webpage

www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads.

Here is the code:

Code:

jQuery.noConflict(); jQuery(document).ready(function(){

	//VAR SETUP
	var rightBg = jQuery('#rightBg'),
		boxStuff = jQuery('.boxStuff'),
		bgControls = jQuery("#bgControls"),
		nextImg = jQuery('#nextImg'),
		prevImg = jQuery('#prevImg'),
		blogNav = jQuery('#blogNav'),
		navBox = jQuery("#navBox"),
		navBoxa = jQuery("#navBox a"),
		navHeight = navBox.height(),
		firstImg = jQuery('.wrapperli:first-child'),
		lastImg = jQuery('.wrapperli:last-child'),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPhone = deviceAgent.match(/(iphone|ipod)/);
	
	//CLOSE FUNCTION
	function closeSesame(){
		jQuery('.activeBox').fadeOut(600,function(){
			navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
			jQuery(".activeNav").removeClass('activeNav');
			rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
			bgControls.fadeIn(600);
		}).removeClass('activeBox');
	}
	
	//OPEN FUNCTION
	function openSesame(){
		navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
		rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
			jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
			navBox.fadeIn(600);
		});
		bgControls.fadeOut(300);
	}
	
	//OPACITY STUFF
	rightBg.css({opacity:".85"});
	
	//REMOVE TITLE ATTRIBUTE
	jQuery("#dropmenu a").removeAttr("title");

	//MENU
	jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
	jQuery("#dropmenu li").hover(function(){
		jQuery(this).find('ul:first').show();
	},function(){
		jQuery(this).find('ul:first').hide();
	});
	jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>&rsaquo;</span>");
		
	//PRETTY PHOTO
	jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
	jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
	jQuery("a[rel^='prettyPhoto']").prettyPhoto({
		animation_speed: 'normal', // fast/slow/normal 
		opacity: 0.35, // Value betwee 0 and 1 
		show_title: false, // true/false 
		allow_resize: true, // true/false 
		overlay_gallery: false,
		counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2 
		//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square 
		hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto 
		modal: false // If set to true, only the close button will close the window 
	});	
		
	//WINDOW LOAD
	jQuery(window).load(function(){
		//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
		jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
		
		//LOAD MESH BG
		jQuery('#mesh').fadeIn(600);
		
		jQuery('#loading').fadeOut(600);
		
		//IF GALLERY PAGE
		if(jQuery('body').hasClass('page-template-page_gallery-php')){
			navBox.fadeIn(600);
			bgControls.fadeIn(600);
			jQuery(".wrapperli:first-child a").click();
		//IF NOT GALLERY PAGE
		} else { 
			openSesame();			
		}
	});
	
	//FADE CRUMBS IN/OUT ON SCROLL
	jQuery('#pageContent').scroll(function(){
		if(jQuery('#pageContent').scrollTop()>150){
			blogNav.fadeOut(300);
		} else {	
			blogNav.fadeIn(300);
		}
	});	

	//NAV BOX STUFF
	navBox.css({marginTop:"-"+navHeight/2+"px"});
	boxStuff.css({marginTop:"-"+navHeight/2+"px"});

	//NAV BUTTON CLICK
	navBoxa.click(function(){
		
		//VAR SETUP
		var thisBox = jQuery(this).attr('href');
			
		//IF ACTIVE LINK, CLOSE STUFF
		if(jQuery(this).hasClass('activeNav')){
			closeSesame();
			return false;
		
		//IF NOT ACTIVE LINK
		}else{
			
			//IF CONTENT OPEN
			if(navBox.hasClass("openNav")){
				navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
				jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
				jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
					jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
				});
			
			//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});
	
	//CLICKING GALLERY IMG
	jQuery(".wrapperli a").click(function(){
		
	if(iPhone){
		return false;	
	}else{
		//GET HREF
		var galleryHref = jQuery(this).attr('href'),
			galleryTitle = jQuery(this).attr('title'),
			imageInfo = jQuery('#imgInfo'),
			itemNumber = jQuery(this).parent().index() + 1;
			numberItems = jQuery('.wrapperli').length;
				
		//CHANGE TITLE INFO	
		if(galleryTitle){
			imageInfo.hide().html(galleryTitle + "&nbsp / &nbsp"+ itemNumber + " of " + numberItems).fadeIn(150);
		} else {
			imageInfo.hide();
		}
		
		//CHANGE CLASSES
		jQuery(".wrapperli").not(this).removeClass('activeImg');
		jQuery(this).parent().addClass('activeImg');
		
		//IF MENU OPEN, CLOSE IT
		if(navBox.hasClass("openNav")){ closeSesame(); }
		
		//CHANGE BACKGROUND
		jQuery.backstretch(galleryHref, {speed: 300});

		return false;
	}
	});
	
	//NEXT CONTROLS
	nextImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.next().length > 0){
				activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				firstImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	//PREV CONTROLS
	prevImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.prev().length > 0){
				activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				lastImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	// Keyboard shortcuts
    jQuery(document).keydown(function(e) {
    	var unicode = e.charCode ? e.charCode : e.keyCode;    	
        if (unicode == 39) { nextImg.click();} // right arrow
        else if (unicode == 37) {prevImg.click();} // left arrow
    });
    
});

and I changed the open sesame to closed sesame here in the code

Code:

//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});

but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated!

Hi everyone please i want to make a menu like the attached image
i tried to make it with many software but i did not get the same view


so can anyone help me?

thanks in advance

i am using chained combox in a form. in coda-slider. but (not first) in other tab chained combobox is not run (mycodes is in attachment)




my codes is in attachment

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

Hi

Only a very simple beginner (thicko) so please don't laugh :-)

I have a very basic allwebco website and in the root I have menu.js which puts a small menu on the top right of every webpage that calls it.

The index.html page in the root calls this menu.js and also another page in a folder from the root calls it (I prefix menu.js in this page with '../' so as to step back to the root). Also on this sub-page I call another page which is in the same folder. This also calls up 'menu.js' and again I prefix it '../' in order to access it from the root, which is the preceding folder.

However, on this second page, it does not display the menu.

I have tried everything by prefixing it with '/', './', '../' and just leaving it as 'menu.js' but it will not find it.

I suppose it is because it is a 'recursive' situation. ie keeps calling itself over and over? Can anyone help please?

Thanks.

Barry

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

I am working on a new site wherein i have list of links in colomn.
what i want is when i click on a link. that color of the text should change to indicate that the link is selected.
I am not talking about roll over effect. even after the mouse is rolls out the color should still remain as it is to show that the link is still selected.
how can i do this.

How can javascript detect which link is selected. and save it may be in a variable.
which changes each time i select a link.

what script or logic should i use for this?

OK, I think this is an error with the js.

I'm in the process of putting together a website in which when the user clicks on the nav bar, it drops down displaying the submenu.

I'm working with HTML Kit and in the preview screen (which if I remember correctly is IE7) it works fine.

However, when I save the file and open it up in any browser (FF, IE, Chrome)only kids and community work section works.

I'm not seeing anything wrong. Does anyone have a clue what's going on? Or would it be a problem with the HTML/CSS

EDIT: Guess I should post the link http://tinyurl.com/67w4epj

I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work:

Code:

<select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>

but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution?

Im coding with AnyLink JS drop down menu and I am running into a annoying Java Script Problem or CSS not sure.

Here is the site ip http://96.0.177.61 if you view it in FF it looks fine but in IE 8 you will find a space about 5 - 10px wide straight across the bottom of the top Nav. I cant figure out why that is happening can someone please help

Thanks