trying to figure out a simple menu using javascript and css

[bookouri]

I found a really simple example menu using CSS and Javascript and Im trying to figure it out. I have figured out how to change just about everything on it, but one thing. I can change the width of the menu items displayed by changing the width here:
.css_menu li a {
display: block;
width: 250px;
height: 20px;
line-height: 20px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
text-decoration: none;
border: 0px solid gray;
color: black;
background-color: #CC9966;
}

But when you mouse over the menu items there's only a tiny bit of the displayed menu that will actually drop down the sub menus for selection. For example, if my menu item is "Annual Income Reports" you might have to mouse over the "al" to get to the drop down menus. You can mouse over ANY part of "Annual Income Reports" to display the lower menus but to actually be able to CLICK on them you have to find that magic spot. Can anybody point me to the right place to look for this "select spot" so I can set it to respond to clicks on any part of the menu item?

I've got three files, the CSS, a Javascript file and an HTML file that calls it all and i can find nowhere in any of those where i can change the "hot spot" to cover the entire menu selection area.

here is the javascript bit too:

(function () {
var _int_adjust_hover = function () {
var dom_uls, dom_lis, i, j;

dom_uls = document.getElementsByTagName ('ul');
for (i = 0; i < dom_uls.length; ++i) {
if ((/^(.*\s+)?css_menu(\s+.*)?$/i).test (dom_uls .className)) {
dom_lis = dom_uls .getElementsByTagName ('li');
for (j = 0; j < dom_lis.length; ++j) {
dom_lis [j].onmouseover = function () {this.className += ' hover';};
dom_lis [j].onmouseout = function () {this.className = this.className.replace (/\s*hover/, '');};
}
}
}
};

if ('addEventListener' in window) {
window.addEventListener ('load', _int_adjust_hover, false);
} else if ('attachEvent' in document) {
window.attachEvent ('onload', _int_adjust_hover);
} else {
window.onload = _int_adjust_hover;
}
}) ();

Sorry to have to ask for help with such basic stuff but this is new stuff for me.

thanks for any info

 

[vacunita]

We'd need the rest of the CSS and actual HTML to even begin to debug.

What you are looking for is not likely to be a a hot spot changing property as there is nothing like that on CSS. I'm thinking you are editing the wrong piece of CSS and messing up the menu hovering.

But this is just guesswork and could be totally wrong. Without the rest of the code there's no way to tell.

If you want to post code, use [ignore]

[/ignore] tags to surround it.

It will create a code section in your post and make the code easier to read.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[bookouri]

Sorry, I hate to ask for somebody to troubleshoot for me, but I'm stuck and can't get anywhere with it.

/* Top-level menu items */

.css_menu {
	display: block;
	height: 20px;
	cursor: pointer;
	white-space: nowrap;
	padding: 0px;
	font-family: Georgia Tahoma Verdana sans-serif;
	font-size: 15px;
	font-weight: bold;
	
}

.css_menu li {
	display: block;
	position: relative;
	float: left;
	
}

.css_menu li a {
	display: block;
	width: 250px;
	height: 20px;
	line-height: 20px;
	padding-left: 4px;
	padding-right: 4px;
	text-align: center;
	text-decoration: none;
	border: 0px solid gray;
	color: black;
	background-color: #CC9966;
}

.css_menu li:hover a,
.css_menu li.hover a {
	background-color: #FFCC99;
	
}

/* Drop-down menu boxes */

.css_menu li ul {
	display: none;
	position: absolute;
	left: 0px;
	top: 21px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
	width: 250px:
}

.css_menu li:hover ul,
.css_menu li.hover ul
{
	display: block;
}

.css_menu li ul li {
	display: block;
	float: none;
	
}

.css_menu li ul li a {
	text-align: left;
	
}

.css_menu li:hover ul li a,
.css_menu li.hover ul li a
{
	background-color: #FFCC66;
	
}

.css_menu li ul li:hover a,
.css_menu li ul li.hover a
{
	background-color: #FFCC99;
	
}

(function () {
	var _int_adjust_hover = function () {
		var dom_uls, dom_lis, i, j;

		dom_uls = document.getElementsByTagName ('ul');
		for (i = 0; i < dom_uls.length; ++i) {
			if ((/^(.*\s+)?css_menu(\s+.*)?$/i).test (dom_uls [i].className)) {
				dom_lis = dom_uls [i].getElementsByTagName ('li');
				for (j = 0; j < dom_lis.length; ++j) {
					dom_lis [j].onmouseover = function () {this.className += ' hover';};
					dom_lis [j].onmouseout = function () {this.className = this.className.replace (/\s*hover/, '');};
				}
			}
		}
	};

	if ('addEventListener' in window) {
		window.addEventListener ('load', _int_adjust_hover, false);
	} else if ('attachEvent' in document) {
		window.attachEvent ('onload', _int_adjust_hover);
	} else {
		window.onload = _int_adjust_hover;
	}
}) ();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>another css menu</title>
<link type="text/css" rel="stylesheet" media="all" href="css_horizontal_menu.css" />
<script type="text/javascript" src="css_horizontal_menu.js"></script>


</head>
<body onload="menuSlider.init('menu','slide')">
<ul class="css_menu" style="margin: 30px auto; width: 1496px;">
	<li><a href="index3.html">Home</a></li>
	<li>
		<a href="#">Home</a>
		<ul>
			<li><a href="[URL unfurl="true"]http://localhost">Level[/URL] 2</a></li>

		</ul>
	</li>
	<li>
		<a href="#">Google</a>
		<ul>
			<li><a href="[URL unfurl="true"]http://www.google.com">Google[/URL] Main</a></li>
			<li><a href="[URL unfurl="true"]http://www.gmail.com">Gmail</a></li>[/URL]

		</ul>
	</li>
	<li><a href="#">Microsoft</a>
	<ul>
				<li><a href="[URL unfurl="true"]http://www.microsoft.com">MS[/URL] Main</a></li>
				<li><a href="[URL unfurl="true"]http://www.hotmail.com">Hotmail</a></li>[/URL]
				<li><a href="[URL unfurl="true"]http://www.msn.com">MSN</a></li>[/URL]
		</ul>
	</li>
	<li><a href="#">Other Links</a>
		<ul>
					<li><a href="[URL unfurl="true"]http://www.cars.com">Another[/URL] Link</a></li>
					<li><a href="[URL unfurl="true"]http://www.youtube.com">youtube</a></li>[/URL]
					<li><a href="[URL unfurl="true"]http://www.apple.com">apple</a></li>[/URL]
			</ul>
	</li>
</ul>

</body>
</html>

 

[vacunita]

The code works for me as it is. What changes did you make?

I did notice that there is a area where the drop down disappears when you move out of the menu item, but other than the menus can all be clicked and work as expected, in IE, and FF

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[bookouri]

They dont work right for me in firefox or ie, you can float over the tp level menus but unless your mouse is positioned just right you can't click on any of the lower level dropdown selections. I'll try again with the code i posted just in case i mixed up versions or something.

thanks

 

[vacunita]

I can, I can mouse over Microsoft, and google, and click on any of the links that drop down.

Perhaps there's something else in your code causing an issue, something you haven't shown us.

I do get an error for the menuslider function since I don't have that but that's it. I'd have to ask if what you posted is everything you have in your code.

Also what the menuslider does?

If you are implementing this in another page with more code we'd need to see that, as that may be interfering.

A Link to a Live page that demonstrates the problem would be the most helpful.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[bookouri]

sorry, its code from a "tutorial" i found online and Im just trying to learn from it.

I DID pull the posted code back onto my development machine and the version here DOES work fine with Firefox, but not in IE.. so Im going to take a look at my IE install and see if I can figure out what's going on..

thanks