I wonder if someone could help, or point me in the direction of a tutorial which might be able to?
I’m after a drop down, well more a hover over.
But it need it to be the width of the site regardless, when it appears on hover over…
The best example i can find is the asos site.
I would need mine to be a full width of the site, like the outlet and kids buttons but say 900wide. A normal div which can have any style within it not necessarily a list navigation.
Can it be done? I can only find normal large drop downs which grow out from aligned left, i need it just to be site width below the navigation.
I’m not having much luck at the moment 
I’ve managed to find this which seems to do what i’m after apart from one flaw…
$(document).ready(function() {
var hide = false;
// Shows the DIV on hover with a fade in
$("li#sub-one a").click(function(){
if (hide) clearTimeout(hide);
$("#guitar-course").fadeIn();
// The main nav menu item is assigned the 'active' CSS class
$(this).addClass("active");
}, function() {
// Fades out the DIV and removes the 'active' class from the main nav menu item
hide = setTimeout(function() {$("#guitar-course").fadeOut("fast");});
$("li#sub-one a").removeClass("active");
});
// Ensures the DIV displays when your mouse moves away from the main nav menu item
$("#guitar-course").hover(function(){
if (hide) clearTimeout(hide);
$("li#sub-one a").addClass("active");
}, function() {
// If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
hide = setTimeout(function() {$("#guitar-course").fadeOut("fast");});
$("#guitar-course").stop().fadeIn();
$("li#sub-one a").removeClass("active");
});
});
After you’ve left the li#sub-one a link the menu layer below stays there. The layer itself only disappears once you move the mouse into layer and out.
Meaning if you have a range of navigation each with its own click to show layer, that if you click show layer and DONT move into the layer, you move onto the next link instead, they back up and que, still showing the existing layer…
Anyone be a big help and give me some advice to fix this…?
I also have to have all the above for each button 
Hey forest ( or anyone ) can you help…?
I need the menu you helped me with above to show when you click NOT hover. So you click on the link, it shows the drop down you click again and it closes…?
Currently i have this…
<script type="text/javascript">
(function($){
$.fn.dropDown = function(options){
var defaults = {
menu:''
},
settings = $.extend({},defaults, options);
return this.each(function(){
var $this= $(this);
$this.hover(function(){
$(settings.menu).stop(true, true).fadeIn(200);
}, function(){
$(settings.menu).stop(true,true).fadeOut(100)();
});
});
}
})(jQuery);
$(function(){
$('li#sub-one').dropDown({menu:'#guitar-course'});
$('li#sub-two').dropDown({menu:'#bass-course'});
$('li#sub-three').dropDown({menu:'#drum-course'});
$('li#sub-four').dropDown({menu:'#vocal-course'});
$('li#sub-five').dropDown({menu:'#song-course'});
$('li#sub-six').dropDown({menu:'#specialist-course'});
});
</script>
I’ve changed
$this.hover(function()
to
$this.click(function()
Which works but i cannot get it to close again…
Anyway if you click elsewhere or the link again it closes it?
Many thanks for any help…
Basically the button that once you hover over to make the layer appear turns a different colour, i need it to stay like in that colour state i.e the hover state whilst your in the layer.
Currently it returns to its normal state once your move the mouse into the layer, so your not sure which buttons your currently viewing the layer for.
This example does what i mean. When you hover over the button and go into the drop down/layer the original button is still active in the hover state.
Mine are not
Hopefully that make sense.
Its just a visual thing to link each layer and button…
Sorry, I can’t understand what you mean, do you know any websites that have the feature you described ?
Sorry, the code I previously gave you missing the curly braces {}.
It should be $(‘#me’).dropDown({menu:‘.menu’});
Not $(‘#me’).dropDown(menu:‘.menu’);
I don’t know how come you manage run the script with the wrong code. Anyway let’s focus on your current problem. I think you got the html wrong.
Can you post your entire html page ?
Thanks again forest but its not allowing me to stay on the newly appeared layer, is this possible?
It just flickers.
This layer will have links on so you need to be able to hover over, make box appear and then move mouse around box using it until you go out of it again…
That make sense and possible?
Here is my code which i’m not having much luck with, it appears but doesn’t stay when your within it… I used your older code as well, see if it was that…
<script type="text/javascript">
$(function(){
$('li#sub-one"').dropDown({hover:true,menu:'.guitar-course'});
});
</script>
<script type="text/javascript">
(function($){
$.fn.dropDown = function(options){
var defaults = {
menu:'',
hover:true,
click:false,
animate:false,
animateTimout:'true',
title:'',
Click:function(){}
},
settings = $.extend({},defaults, options);
return this.each(function(){
var $this= $(this);
$this.hover(function(){
$(settings.menu).show();
}, function(){
$(settings.menu).hide();
});
var mi = $(settings.menu).children();
mi.click(function(e){
var text = $(e.target).text();// or var text = $(this).text();
$(settings.title).text(text);
$(settings.menu).hide();
//call back function starts here
settings.Click.call(this);
});
});
}
})(jQuery);</script>
<ul id="sub-nav">
<li id="sub-one"> <a href="#">Guitar Courses</a></li>
<li> <a href="#">Bass Courses</a></li>
<li> <a href="#">Drum Courses</a></li>
<li> <a href="#">Vocal Courses</a></li>
<li> <a href="#">Songwriting Courses</a></li>
<li> <a href="#">Specialist Courses</a></li>
</ul>
<div class="guitar-course">test hover box</div>
try this jquery plguin, you will need to style and position the menu the way you want it look, this script will show and hide the menu for you.
//<div id="me" style="width:200px; height:30px; margin:100px 0 0 100px; background:#36C">
// <div class="title">KID WEARS</div>
// <div class="menu" style="background:#CCC;position:absolute;display:none;z-index:200;">
// <div>Some thing to show 1</div>
// <div>Some thing to show 2</div>
// <div>Some thing to show 3</div>
// <div>Some thing to show 4</div>
// <div>Some thing to show 5</div>
// </div>
//</div>
//$(function(){
// $('#me').dropDown({
// hover:true,
// menu:'.menu',
// title:'.title'
// });
//});
(function($){
$.fn.dropDown = function(options){
var defaults = {
menu:'',
hover:false,
click:false,
animate:false,
animateTimout:'',
title:'',
Click:function(){}
},
settings = $.extend({},defaults, options);
return this.each(function(){
var $this= $(this);
$this.hover(function(){
$(settings.menu).show();
}, function(){
$(settings.menu).hide();
});
var mi = $(settings.menu).children();
mi.click(function(e){
var text = $(e.target).text();// or var text = $(this).text();
$(settings.title).text(text);
$(settings.menu).hide();
//call back function starts here
settings.Click.call(this);
});
});
}
})(jQuery);
Sorry to ask again for help but how difficult would it be to add a fade to the hover?
I notice some jQuery galleries slide shows etc have fades that you can control the speed, possible to add that to your code?
Thanks again 
You didn’t code the html incorrectly. The menu has to be inside the containing element which will initiate the drop down. Your menu is sub-nav not guitar course.
I rewrite the code for you, adding some essential CSS. try it!
<style type="text/css">
* {
/*reset padding and margin of every element, the ul and li have default padding and margin values, giving undesired
layout*/
padding:0;
margin:0;
}
#sub-nav{display:none;
background-color:red;
height:250px;
position:absolute;
width:900px;
z-index:200;
}
.container_1 {
position:relative; /*this line is important, do not alter */
width:200px;
height:30px;
line-height:30px;
margin:100px 0 0 100px;
background:#36C;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.dropDown = function(options){
var defaults = {
menu:''
},
settings = $.extend({},defaults, options);
return this.each(function(){
var $this= $(this);
$this.hover(function(){
$(settings.menu).show();
}, function(){
$(settings.menu).hide();
});
});
}
})(jQuery);
$(function(){
$('.container_1').dropDown({menu:'#sub-nav'});
});
</script>
<div class="container_1" >
<div>test hover box</div>
<ul id="sub-nav">
<li id="sub-one"> <a href="#">Guitar Courses</a></li>
<li> <a href="#">Bass Courses</a></li>
<li> <a href="#">Drum Courses</a></li>
<li> <a href="#">Vocal Courses</a></li>
<li> <a href="#">Songwriting Courses</a></li>
<li> <a href="#">Specialist Courses</a></li>
</ul>
</div>
Anyone help me out adding to my last post to close the panel once you leave the main link as well as the actual layer?
I’ve posted above and here is the css for the panel that appears.
The buttons is just a normal link…
.guitar-course{display:none;
background-color:red;
height:250px;
position:absolute;
top:218px;
width:900px;left:0;z-index:200;
}
Thanks again
look in the code, change show() to
stop(true, true).fadeIn(500)
And change hide() to
stop(true,true).fadeOut(500)
500 is 500 mili seconds, when hover it takes 500 mili seconds to show the menu completely, and vice versa. You can set whatever seconds you like.
If you like it slide up slide down instead of fading. Change fadeIn(500) to slideDown(500), and change fadeOut(500) to slideUp(500)
Oh I see,
add this to your css
div.container_1:hover {
background:red;
color:#76D968
}
Ah perfect thank you forest.
I see how it works now, thanks.
I’ve put the layer as a span inside the li tag, as i need the link to be a list navigation. Each button showing a different layer.
Like so…
<ul id="sub-nav">
<li id="sub-one"> <a href="#">Guitar Courses</a>
<span class="guitar-course">test layer</span>
</li>
Thought i would ask on the off chance it can be done.
When you move the mouse from the button to the layer it goes back to its normal state not its hover state obviously.
Would there be anyway for it to remain in its hover state whilst you move the mouse around the layer, so you know your still using that button?
So button black usually, hover over turns red and layer appears, move into layer button remains red rather than currently going back to black as the mouse is technically not hovering over the button anymore.
I doubt its possible but thought i would ask
Thanks again.
No, call it like this
$(function(){
$('#me1').dropDown(menu:'.menu1');
$('#me2').dropDown(menu:'.menu2');
$('#me3').dropDown(menu:'.menu3');
$('#me4').dropDown(menu:'.menu4');
});
I’ve shortened plugin a bit just enough for your need, no bloated stuffs. So, use the below code instead of the previous code I gave you
//<div id="me" style="width:200px; height:30px; margin:100px 0 0 100px; background:#36C">
// <div class="title">Kid wears</div>
// <div class="menu" style="background:#CCC;position:absolute;display:none;z-index:200;">
// <div>Some thing to show 1</div>
// <div>Some thing to show 2</div>
// <div>Some thing to show 3</div>
// <div>Some thing to show 4</div>
// <div>Some thing to show 5</div>
// </div>
//</div>
//$(function(){
// $('#me').dropDown(menu:'.menu');
//});
(function($){
$.fn.dropDown = function(options){
var defaults = {
menu:''
},
settings = $.extend({},defaults, options);
return this.each(function(){
var $this= $(this);
$this.hover(function(){
$(settings.menu).show();
}, function(){
$(settings.menu).hide();
});
});
}
})(jQuery);
Perfect thank you Forest
If i wanted it to work across a few buttons with corresponding drop downs particular for each button, how i would i add them to it, something like this?
$('#me,#me2').dropDown({
hover:true,
menu:'.menu,.menu2',
title:'.title',
placement:true
});
});
Thanks again