Showing hidden div's on mouseover - not quite going to plan

Hi all,

I am trying to put together a situation where a person rolls over a button and a hidden div appears, which in fairness is working, and then if I roll out of that hidden fiv it goes away, but the code blow as you will see if you follow the link, isnt working correctly.

When I rollver ‘Europe’ yes the hidden div appears, but it goes away when I rollover one of the links in the div that appears.

http://devchecksafetyfirst.csf.dcmanaged.com/index.php?Country=5

here is my code:


#country_Nav{
position:relative; width:962px; height:32px; margin-top:3px; margin-bottom:3px; margin-left:auto; margin-right:auto;	
}
#top_Level_Nav1_Div{
position:relative; width:158px; float:left;	background-color:#f5a323; height:32px; text-align:center;
}
#top_Level_Nav1_Div a:link{
position:relative; color:#fff; height:32px; line-height:32px; text-align:center; text-decoration:none;
}
#top_Level_Nav1_Div a:visited{
position:relative; color:#fff; height:32px; line-height:32px; text-align:center; text-decoration:none;
}
#top_Level_Nav1_Div a:hover{
position:relative; color:#333; height:32px; line-height:32px; text-align:center; text-decoration:underline;
}
#top_Level_Nav1_Hidden{
position:relative; height:80px; width:962px; margin-left:auto; margin-right:auto; background-color:#f5a323; margin-top:-3px; clear:both; margin-bottom:6px;	
}


<div id="country_Nav">

<div id="top_Level_Nav1_Div">
<a href="#" class="top_Level_Nav1" onmouseover="document.getElementById('top_Level_Nav1_Hidden').style.display = 'block';">EUROPE</a>
</div>
</div>

<div id="top_Level_Nav1_Hidden" style="display:none;" onmouseout="document.getElementById('top_Level_Nav1_Hidden').style.display = 'none';">
<? $d=mysql_query("select * from tbl_countries WHERE (Reg_Cntry='1') order by Nom_Cntry ASC");
while($f=mysql_fetch_assoc($d)){ ?>
<a href="result.php?Country=<?=$f['Id_Cntry']?>"><?=$f['Nom_Cntry']?></a>&nbsp;<span style="color:#333">|</span>&nbsp;
<? } ?>
</div>

You need to use the mouseleave event rather than mouseout (there’s an explanation of the difference here: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseleave).

It would also be better to move these event bindings into your external .js file though, rather than mixing JS into your HTML. As you’re already using jQuery, you could just add something like this:


$('div#top_Level_Nav1_Hidden').mouseleave(function(){ $(this).hide() });

HI,

Of course you don’t need js for something as simple as that anyway. It can be done in simple css.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
#country_Nav, #country_Nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
#country_Nav {
	min-height: 32px;
	line-height:32px;
	margin: 3px auto;
	position: relative;
	width: 962px;
}
#country_Nav > li > a {
	color: #fff;
	background:#F5A323;
	height: 32px;
	line-height: 32px;
	width: 158px;
	text-decoration: none;
	display:block;
	text-transform:uppercase;
	text-align:center;
}
#country_Nav ul {
	margin-left:-999em;
	position:absolute;
	left:0;
}
#country_Nav li:hover ul {
	margin-left:0;
	background:#F5A323;
	padding:10px;
	position:relative;
}
#country_Nav li li {
	display:inline;
	color:#666;
}
#country_Nav li li a:hover { color:#000 }
</style>
</head>

<body>
<ul id="country_Nav">
		<li><a href="#">Europe</a>
				<ul>
						<li><a href="result.php?Country=64">Austria</a> | </li>
						<li><a href="result.php?Country=62">Belgium</a> | </li>
						<li><a href="result.php?Country=70">Bulgaria</a> | </li>
						<li><a href="result.php?Country=40">Croatia</a> | </li>
						<li><a href="result.php?Country=33">Cyprus</a> | </li>
						<li><a href="result.php?Country=34">Czech Republic</a> | </li>
						<li><a href="result.php?Country=56">France</a> | </li>
						<li><a href="result.php?Country=35">Germany</a> | </li>
						<li><a href="result.php?Country=29">Greece</a> | </li>
						<li><a href="result.php?Country=59">Holland</a> | </li>
						<li><a href="result.php?Country=63">Hungary</a> | </li>
						<li><a href="result.php?Country=58">Italy</a> | </li>
						<li><a href="result.php?Country=39">Montenegro</a> | </li>
						<li><a href="result.php?Country=61">Portugal</a> | </li>
						<li><a href="result.php?Country=1">Spain</a> | </li>
						<li><a href="result.php?Country=38">Turkey</a> | </li>
						<li><a href="result.php?Country=57">United Kingdom</a> | </li>
				</ul>
		</li>
</ul>
</body>
</html>

Hi Paul, I have just put your code into practice and it works really well.

I will need to put a row of buttons next to the Europe one, horizontally in that space, so there shouldnt be any problems with that Im guessing.

One little issue I did find, is that if you roll over ‘Europe’ and leave to the left its fine, but if you roll over ‘Europe’ and the roll out to the right its doesnt close.

Everything else though is great, just need to sort of replicate it another 5 times.

Thanks

Hi,

If you are making a dropdown menu effect they you are better off doing it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
#country_Nav, #country_Nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
#country_Nav {
	min-height: 32px;
	line-height:32px;
	margin: 3px auto;
	position: relative;
	width: 962px;
z-index:99;
}
#country_Nav > li {
	width:158px;
	margin:0 2px 0 0;
	float:left;
}
#country_Nav > li > a {
	color: #fff;
	background:#F5A323;
	height: 32px;
	line-height: 32px;
	width: 158px;
	text-decoration: none;
	display:block;
	text-transform:uppercase;
	text-align:center;
}
#country_Nav ul {
	margin-left:-999em;
	position:absolute;
	left:0;
	top:100%;
	width:100%;
}
#country_Nav li:hover ul {
	margin-left:0;
	background:#F5A323;
	padding:10px;
}
#country_Nav li li {
	display:inline;
	color:#666;
}
#country_Nav li li a:hover { color:#000 }
</style>
</head>

<body>
<ul id="country_Nav">
		<li><a href="#">Europe</a>
				<ul>
						<li><a href="result.php?Country=64">Austria</a> | </li>
						<li><a href="result.php?Country=62">Belgium</a> | </li>
						<li><a href="result.php?Country=70">Bulgaria</a> | </li>
						<li><a href="result.php?Country=40">Croatia</a> | </li>
						<li><a href="result.php?Country=33">Cyprus</a> | </li>
						<li><a href="result.php?Country=34">Czech Republic</a> | </li>
						<li><a href="result.php?Country=56">France</a> | </li>
						<li><a href="result.php?Country=35">Germany</a> | </li>
						<li><a href="result.php?Country=29">Greece</a> | </li>
						<li><a href="result.php?Country=59">Holland</a> | </li>
						<li><a href="result.php?Country=63">Hungary</a> | </li>
						<li><a href="result.php?Country=58">Italy</a> | </li>
						<li><a href="result.php?Country=39">Montenegro</a> | </li>
						<li><a href="result.php?Country=61">Portugal</a> | </li>
						<li><a href="result.php?Country=1">Spain</a> | </li>
						<li><a href="result.php?Country=38">Turkey</a> | </li>
						<li><a href="result.php?Country=57">United Kingdom</a> | </li>
				</ul>
		</li>
		<li><a href="#">Another</a>
				<ul>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
				</ul>
		</li>
		<li><a href="#"> Another</a>
				<ul>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
				</ul>
		</li>
		<li><a href="#">Another</a>
				<ul>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
						<li><a href="result.php?Country=64">More&nsbp;Stuff</a> | </li>
				</ul>
		</li>
</ul>
</body>
</html>


You don’t really want the dropdown menu portion causing the page to jump up and down as that is a very awkward effect so you make the child an absolute element and it just overlaps the content when it pops out and makes for a smoother experience.

Ye thats sweet, thanks Paul…

A little bit of styling of the css and that be perfect, and yes good advice on the jumping of the page, this is a lot better.

Cheers

To keep the current tab when hovered the same colour as the dropdown portion to complete the tab effect use this code:


#country_Nav > li:hover a{background:#f57c1f}

Hi Paul,

One more thing, I am stylizing the buttons, and needed to have the rollover a different colour to create the effect, its great and works as you said, but there one little issue which I’m not sure there a way around it.

When say you rollover Europ the drop down appears and you the roll into the drop down buttons, then roll over colour of the ‘europe’ button goes back to its no rollover colour which is then different from the drop down.

I added a little bit to the css:


#country_Nav, #country_Nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
#country_Nav {
	min-height: 32px;
	line-height:32px;
	margin: 3px auto;
	position: relative;
	width: 962px;
z-index:99;
}
#country_Nav > li {
	width:158px;
	margin:0 2px 0 0;
	float:left;
}
#country_Nav > li > a {
	color: #fff;
	background:#F5A323;
	height: 32px;
	line-height: 32px;
	width: 158px;
	text-decoration: none;
	display:block;
	text-transform:uppercase;
	text-align:center;
}
#country_Nav > li > a:hover {
	color: #000;
	background:#f57c1f;
	height: 32px;
	line-height: 32px;
	width: 158px;
	text-decoration: none;
	display:block;
	text-transform:uppercase;
	text-align:center;
}
#country_Nav ul {
	margin-left:-999em;
	position:absolute;
	left:0;
	top:100%;
	width:100%;
}
#country_Nav li:hover ul {
	margin-left:0;
	background:#f57c1f;
	padding:10px;
}
#country_Nav li li {
	display:inline;
	color:#666;
}
#country_Nav li li a:hover { color:#000 }

http://devchecksafetyfirst.csf.dcmanaged.com/

Hi,

I gave you a hint in post #7 but here’s the full code for what I think you want.:slight_smile:


#country_Nav > li:hover>a{
background:#f57c1f;
color:#fff;
height:35px;
}

Ah right, you replied with an answer before i asked the question, lol, thanks.

Looks great cheers.

See my latest post #9 as it addresses the issue more specifically :slight_smile:

I also notice you are adding padding to the ul which makes it 20px too wide therefore you need ot reduce the width which is best done like this.


#country_Nav li:hover ul {
width:auto;
right:0px;
}

The width is set to auto so you can add as much padding as you like and then the width of the element is controlled by left:0 and right:0 (because its an absolute element)and will thus fill the available width of its parent.

Thank you Paul, really appreciated, it works fantastic.

I think I need to catch up a bit on CSS as didnt think some of this would be possible, little did I know.