Hello,
Take a look at the following page
If you look in Firefox and hover over the nav bar you will see a dropdown appear, however this does not happen in IE7, can anyone help me find out why?
Thanks, 
Not sure about IE7, but that menu looks like it needs more work in all browsers. Firstly, if you want to use images, investigate image âspritesâ, so that there isnât a long delay when a user hovers over the menu links. (I must say, also, that the orange-white mix on hover doesnât work at all. It looks like the menu is broken, Iâm afraid, so Iâd lose it. Clever, but too clever. 
)
If I were you, Iâd start again, using a more standard and reliable drop menu method.
Thanks Ralph,
Those hover state orange white mix is just for testing purposes thats all 
I just need to cut out the actual mouse over button in photoshop, wanted to get the nav working properly first :)âŚ
I see what you mean about the long delay, i have looked into sprites and have used that method before. However in regards to the nav at itâs current state, you mentioned that it needs âmore work in all browsersâ⌠Aside from the loading problem was there anything else that you saw?
Regards,
Iâm not keen on the code structure, which is why I pointed you to Paulâs example. Also, the Gym Equipment dropdown stretches too far to the right for my liking. But I guess the main thing was the slow rollovers. Still, Iâd suggest making sure you are using the best dropdown solution before trying to debug all browsers. With the best solution, you may not need to.
Good point Ralph. Well you guys on this forum know best and itâs always a good idea to listen to advice given
Sooo, i will have a go at using the method you posted in the link. Before i start it, with that method would i be able to get the dropdown looking like this ?
The dropdown links will be dynamic so the heading and subcategories will all be pulled out from a database. Can i still use your suggested link to accomplish this or would you suggest something else?
Many thanks,
Regards,
Certainly that dropdown can be modified for that purpose. I canât advise on the database aspects, but I guess youâd just create a more complex setup within each sub LI, such as a div with columns of some sort. Persoanlly I donât much like dropdowns, preferring that users drill down into the site intuitively. Think of mobile users, who canât access that dropdown anyway.
OK i have had a go at using the example you suggested, see my attempt here
Again, ignore the hovers i will be using sprites eventually
Anyway, when you hover over âGardeningâ for example, it should show the UL within the Li 4 timesâŚ
But it only shows the one. Could you possible point me in the right direction? 
Many thanks,
I thought you had a working version of this in another thread?
You are showing the ul on hover and it is placed absolutely into position so all 4 uls will be placed on top of each other exactly and show as one.
The 4 uls should be wrapped in one parent div of correct width (not in a div around each ul) and then the uls floated left to line up horizontally if that was what you wanted.
You would then instead of saying #nav li:hover ul{margin-left:0} you would say #nav li:hover div{margin-left:0} and it would be the div that is absolutely positioned instead of the nested ul.
Iâm sure I saw you had a working example of this earlier though?
Hi Paul,
Been a long time, howâs things?
I was working on one earlier, but it was acting weird. As the IE7 issue was a different issue i thought i would post another thread as it was more cross browser issues as oppose to the actual creation of the nav.
You can merge both threads if you want pal?
Many thanks,
Fine thanks
You can merge both threads if you want pal?
Iâll leave it as it is for now as the menu seems to have evolved
Let us know if you are still stuck.
Brill,
OK i see what you mean about the nav bar. First things first, i have wrapped the <ul> in one parent div.
Then i have added ul#nav li div { position: absolute; }. I know you said i need to add a width but the problem is that this will by dynamic so the width will always be different. It needs to look like this.
Then i have also added #nav li:hover div{margin-left:0} so that it is the div that shows up on hover.
But this doesnât seem to be doing anything? Have i missed something out?
Hi,
Yes you missed the styles for the div that were previously assigned to the ul
However because you want this to be a fluid width you will need to change it slightly because IE7 wonât let the 4 uls line up horizontally because the parent is always shrink wrapping them.
Youâll need to add another nested div like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<!-- Stylesheets -->
<style type="text/css">
/*
Document : nav
Created on : 19-Jun-2011, 19:36:21
Author : e3creative
*/
* {
padding: 0;
margin: 0;
}
/* BASIC STRUCTURE */
body {
font-family: Arial;
font-size: 12px;
}
/* NAVIGATION LINKS */
#home-link {
width:100px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/home-off.jpg') no-repeat 0 0;
}
#gardening-link {
width:103px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gardening-off.jpg') no-repeat 0 0;
}
#gardening-link:hover {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gardening-on.jpg') no-repeat 0 0;
}
#gardening-link.current {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gardening-on.jpg') no-repeat 0 0;
}
#furnishing-link {
width:101px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/furnishing-off.jpg') no-repeat 0 0;
}
#furnishing-link:hover {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/furnishing-on.jpg') no-repeat 0 0;
}
#furnishing-link.current {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/furnishing-on.jpg') no-repeat 0 0;
}
#electronics-link {
width:105px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/electronics-off.jpg') no-repeat 0 0;
}
#electronics-link:hover {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/electronics-on.jpg') no-repeat 0 0;
}
#electronics-link.current {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/electronics-on.jpg') no-repeat 0 0;
}
#clothing-link {
width:84px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/clothing-off.jpg') no-repeat 0 0;
}
#clothing-link:hover {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/clothing-on.jpg') no-repeat 0 0;
}
#clothing-link.current {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/clothing-on.jpg') no-repeat 0 0;
}
#toys-and-games-link {
width:122px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/toys-and-games-off.jpg') no-repeat 0 0;
}
#toys-and-games-link:hover {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/toys-and-games-on.jpg') no-repeat 0 0;
}
#toys-and-games-link.current {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/toys-and-games-on.jpg') no-repeat 0 0;
}
#gym-equipment-link {
width:131px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gym-equipment-off.jpg') no-repeat 0 0;
}
#gym-equipment-link:hover {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gym-equipment-on.jpg') no-repeat 0 0;
}
#gym-equipment-link.current {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gym-equipment-on.jpg') no-repeat 0 0;
}
#pets-link {
width:97px;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/pets-off.jpg') no-repeat 0 0;
}
#pets-link:hover {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/pets-on.jpg') no-repeat 0 0;
}
#pets-link.current {
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/pets-on.jpg') no-repeat 0 0;
}
.text-indent {
text-indent: -999px
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
color: #fff
}
ul#nav li {
position: relative;
float: left;
}
ul#nav li div.sub {
margin-left: -999em;
top: auto;
left:0;
position: absolute;
width:auto;
}
ul#nav li div.sub div{
float:left;
margin-right:-999em;
background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/nav-bg.png');
}
ul#nav li ul {
float: left;
}
ul#nav li a {
display:block;
padding: 10px 0;
text-decoration: none;
}
ul#nav li ul li {
min-width: 140px;
float:left;
clear:left;
}
ul#nav li ul li a {
padding: 5px 10px;
color: #fff
}
ul#nav li ul li a:hover {
text-decoration: underline
}
ul#nav li:hover div.sub, ul#nav li.over div.sub {
margin-left:0;
}
ul#nav ul h4 {
background: #999;
padding: 5px 10px;
width:120px;
font-size: 12px
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#" id="home-link" class="text-indent">Home</a></li>
<li> <a href="#" id="gardening-link" class="text-indent">Gardening</a>
<div class="sub">
<div>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
</div>
</div>
</li>
<li> <a href="#" id="furnishing-link" class="text-indent">Furnishing</a>
<div class="sub">
<div>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
</div>
</div>
</li>
<li> <a href="#" id="electronics-link" class="text-indent">Electronics</a>
<div class="sub">
<div>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
</div>
</div>
</li>
<li> <a href="#" id="clothing-link" class="text-indent">Clothing</a>
<div class="sub">
<div>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
</div>
</div>
</li>
<li> <a href="#" id="toys-and-games-link" class="text-indent">Toys & Games</a>
<div class="sub">
<div>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
</div>
</div>
</li>
<li> <a href="#" id="gym-equipment-link" class="text-indent">Gym Equipment</a>
<div class="sub">
<div>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
</div>
</div>
</li>
<li> <a href="#" id="pets-link" class="text-indent">Pets</a>
<div class="sub">
<div>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
<ul>
<li>
<h4>Tables</h4>
</li>
<li><a href="">Wooden Tables</a></li>
<li><a href="">Glass Tables</a></li>
<li><a href="">Flat Pack</a></li>
<li><a href="">Metal Tables</a></li>
<li><a href="">Marble Tables</a></li>
</ul>
</div>
</div>
</li>
</ul>
</body>
</html>
That is working back to IE7 now (couldnât check ie6 as you have no support built in).
Usually in a mega menu you give the menu a fixed width and align it to the left of the whole menu and apply a fixed width. In your example you are moving the mege menu all along the line!
Are you sure you have thought this through ?
When you get to the end of the nav the menu will stretch right out of the right side of the window.
(You should also do the hover states by changing the background position of a sprite and not loading a new image as there is a serious delay in your menu)
Thanks so much 
What do you think? Take a look now
What i have done is when the nav is too long i have applied a negative left margin. Would you approve of this? (As from what i have seen you guys are the CSS gurus.)
And i will use the sprites for sure, just wanted to get the nav looking how tit is up till now
Let me know what you think and if there is anything i have done wrong :x
Ahhhh! I so should have listened to you
This is now dynamic, âGardeningâ and âGym Equipmentâ have menu items. Only problem is that i have applied a minus left margin to Gym Equipment. Now the problem is that when there is only one <ul> the menu item appears way over to the left. So the minus left margin would somehow need to move towards the left when it will overflow the Nav.
Is this possible? 
You could try floating to the right for that element so it lines up.
e.g.
ul#nav li div.gym-equipment-left div {float:right!important}
I havenât tested the above and you will probably have to remove your negative margin.
Thanks Paul,
This didnât work:
ul#nav li:hover div.gym-equipment-left div{float:right!important}
When i hovered over the link it added a scroll bar and i couldnât not scroll so far to the right to even see the menu item.
So i tried with this:
ul#nav li:hover div.gym-equipment-left{float:right!important}
That looks a little better, but what you will see that it still over flows past the end of the nav, see here
You need to make these changes as this is the only combination that seems to work in IE7.
ul#nav li:hover div.sub, ul#nav li.over div.sub {
[B] margin:0;[/B]
}
[B]ul#nav li div.gym-equipment-left{
left:auto;
right:0;
margin:-999em 0 0 0;
width:800em;
}
ul#nav li div.gym-equipment-left div{
float:right;
margin:0;
background-position:100% 0;
}
[/B]
Ok first of all, thank you that works perfectly.
Secondly, i understand most of the changes but 2. What does the margin:-999em 0 0 0; do and is the background-position:100% 0; an IE7 hack?
Thanks again for your help Paul
The menu was being hidden by being dragged off to the left by 999em but when the position was set to right:0 instead of left:0 this margin didnât drag the menu anywhere but just made the element very wide and the menu always remained hidden in ie7. Therefore I initially hid the menu by dragging it up above the monitor instead and then just showing it on hover by setting margin:0 to bring it back.
The background-position may not be necessary now but in one of the variations I tried it was needed it as it was showing out of position. It will do no harm so leave it in place.
Thanks for that pal, really appreciate it.
I can finally get this site moving forward now
Thanks again