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