Hi,

 

I have been trying to implement a drop down menu on the site I am working on. I am ALMOST there, but I have a problem with the spacing of the navigation menu items. They are not spaced equally, and in IE, the last item "Corporate & Promotional Gifts" breaks onto 2 lines.

 

Take a look here:

 

http://is.gd/89hA

 

I am thinking that if I could make the spacing smaller and make it equal between each item then all would be fine... but I am a bit lost, and have been experimenting, so may have messed things up somewhat!

 

Hope some CSS gurus out there can help!! Thanks in advance...

 

The CSS is here:

 

#nav {
padding: 0;
margin: 8px 0 8px 45px;
list-style: none;
}

#nav ul a {
padding: 10px 0 6px 6px; 
}

#nav a {
display: block;
width: 15em;
color:#fff;
text-decoration:none;
}

#nav li a:hover, #nav a:active {
color: #F64337;
}

* html #nav a { 
width: 8em;
}

#nav li {
float: left;
width: 8em;


}

#nav li ul {
position: absolute;
width: 15em;
left: -999em;
background: #000;
padding: 0 0 3px 0;

}

#nav li:hover ul, #nav li.sfhover ul{
left: auto;
}

Just took a quick look

 

#nav li {
float: left;
width: 8em;
}

 

... is fixing the width of each top level nav link so if the text is too long it starts wrapping, try setting the width to auto?

Just took a quick look

 

#nav li {
float: left;
width: 8em;
}

 

... is fixing the width of each top level nav link so if the text is too long it starts wrapping, try setting the width to auto?

 

Thanks Rob,

 

I'm afraid that just makes the spacing massively wide (see screenshot). The reason I am having to specify widths is, I think, to do with getting the drop-down menu to work properly in certain browsers. I followed a guide here to do the drop-down menu and I think this is where the problems have sprung from!

 

Hi,

 

floated horizontal menus are a pain to code for all browsers.

 

see http://www.cssplay.co.uk/menus/final_drop.html for a drop-down horizontal menu that works everywhere. As an added bonus it doesn't use javascript. View source to see how it's done. The CSS is inline and commented...

 

If you want a drop down that does use javascript, the best I've found is Superfish

Thanks very much Sameer, I will check those out. The one I am trying to implement is based on Suckerfish, probably similar to Superfish.

 

In the meantime, if anyone can spot anything fundamental I may be doing wrong, I would welcome any feedback. Cheers!

see http://www.cssplay.co.uk/menus/final_drop.html for a drop-down horizontal menu that works everywhere. As an added bonus it doesn't use javascript. View source to see how it's done. The CSS is inline and commented...

 

That is brilliant - I have been looking for something like that.

 

I do so many browser fixes on DDs like that!

is this fixed now then????????