Hey guys,
If you hover over the “Gardening” link, you will notice a dropdown but it appears too far to the right. Any ideas why this is?
Any suggestions as to how this can be fixed?
Many thanks,
Sorry I don’t have much more time but was checking it out…
Firefox & IE it’s way over
Chrome just a few hundred pixels over to the right
Closely look at this line in nav.css
ul#navigation-bar li {
display: inline;
position: relative;
}
When you disable relative it shifts all the way left.
Looking further the element wrapping that I believe has this
ul#navigation-bar div {
background: none repeat scroll 0 0 #EEEEEE;
color: #000000;
font-weight: normal;
left: -999em;
margin-top: 35px;
padding: 0 11px 10px;
position: absolute;
text-align: left;
}
It’s as if this is pushing the relative item way out. Go ahead and uncheck that relative and see if you can reposition it easier with some margin-left attributes.
Watch IE Box issues though!
Hope that helps and if I have time I can help pinpoint further tomorrow!
adding float left to the li puts in on the money in fx
Hi guys,
Thanks for the advice, basically this dropdown need to be dynamic, so i would probably need to wrap the <ul> in a loop and pull out whatever i need to from the database.
However, if you look at the drop downs now, if you hover over each main link, you will see that all appear too far to the left, and what problem i am having is the if i add a margin left it will add it to all the drop downs. I need to be specific for each one.
Just so you understand what it should look like, an example is shown below:
Can you see where i am going wrong?
Kind regards,
Hello again,
Does anyone have any thoughts on how i can achieve this? Are there any examples i could possibly look at?
Thanks 
Thanks,
I am trying to have a go at doing this nav and have almost got it complete, see working example here.
Ignore the roll overs as i need to make them look a lot better, was just doing it to test. Anyway, when you hover over the nav i have a series of <ul> elements which i float to the left so that they display inline but it doesn’t seem to be working?
Can anyone help?
I need it to look like this.
Many thanks,
Hi, I’m assuming your going to have to override all the ul/li settings you have for the top level. like #nav ul {…}. That gets a little messing is why I just used “p” in mine.
OK I looked. In mine I I used a width on the hide/show div and its contents inside (eg your ul). Doing so gets yours on track. I assume probably you need different widths for each. Maybe there is some magic way of dong it that someone else can show you but I would just class each div and feed it a width.
Thanks Eric,
The problem here is that the contents of the drop down will be dynamic populating from the database. So i might need to set a minimum width as the width could get bigger depending on the name of the headings in the dropdown…
I will try and stick it all in a <div> and then see if i can achieve it that way 
Thanks again,
Your welcome let me know how you get along.
Hello again,
I have tried sticking the <ul> inside a <div> but can’t seem to get it to display correctly 
Take a look here
Can’t seem to work out why this is happening?
Hi, break the whole nav out of that page and set up a test page. I or someone else will take that code and make nice.
Hello again
OK i have set up the navigation on a separate page here
Any chance you could help me out please? 
I would very much appreciate it…
Cool. To be clear. Do you still need the width of the drop to be dynamic? Because I don’t know if that’s possible.
…or just the list items?
Hi Eric,
Well when i pull it out from the database the <ul> will be in a while loop which i was hoping i could float to the left. I have tried doing this on the test page and you will see that i have got it to work how i want, see here
So its just when it is withing the <div> within the dropdown that it does not seem to work.
You will notice that i have not set a with on the <ul> and it still works, just the nav is causing issues 
Hmmm. Well if I copy and past the code it does not work properly. If I extract the code form the css links and place in head it does not work at all. I’m not a good puzzle maker. So I am sort of unable to play with the code with out putting in some time. So I am back to making suggestions. I would not wrap each heading in a div. Just one div wraps them all. Just like mine. Use the ul as your container for each heading. The show/hide div needs to have a width that is wide enough to accommodate each section. For instance, if I give your div width 600px and each sub width 150px they all lay out horizontally as you want.
If that does not work, why dont you take mine (which does) and reverse engineer it?
This is using your example, i changed it around a bit but most of it is your stuff
I got it working nearly, see here
i had to set a width on .navigation-bar-div and the <ul> as well as the heading the <li>.
I have found 2 problems, it doesn’t work in IE7, and second thing, the very last dropdown “Pets”. If you hover over it, it adds a scroll bar to the page. Is there a way i can get the dropdown do appear to the left rather than the right as it is currently going off the page.
Many thanks,
Yes. To make it go left instead of right do exactly how I did it in my demo. Same as you, I’d have to go look to see how I did it.
I got it working. Forgot to apply the “dif” class to the list element. 