3 replies [Last post]
sejf83
Offline
Enthusiast
London
Last seen: 13 years 15 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

I'm trying to apply horizontal, Suckerfish-style navigation on this site.

I'm a bit stuck in a couple of places. First, how can I better space the navigation options in the black bar? There is too much space around "Home" while other options are breaking to two lines.

Second, I want the background color to change on the submenus with a mouse hover. Right now, when someone mouses over, the hover color exceeds the darker blue (parent) box. How can I fix that?

Here is the HTML:

And the CSS:

#navigation { border-bottom: 10px solid #fff; }

#navigation, #navigation ul {
width: 100%;
float: left;
list-style: none;
background-color: #000;
font: bold .75em Lucida Grande, Trebuchet MS, Arial, Helvetica, san serif;
padding: 0px;
margin: 0px;
text-transform:uppercase;
}

#navigation a {
display: block;
width: 9em;
color: #fff;
text-decoration: none;
padding: .25em 1em;
}

#navigation ul li a {
display: block;
text-decoration: none;
color: #fff;
width: 12em;
}

#navigation li {
float: left;
padding: 0;
width: 110px;
}

#navigation li ul {
position: absolute;
left: -999em;
height:auto;
width: 12em;
font-weight: normal;
text-transform: none;
margin: 0;
background-color: #0000FF;

}

#navigation li a:hover, ul li a:hover {
color: #ffb300;
}

#navigation ul li a:hover {
background-color: #0099FF;
}

#navigation li:hover ul {
left: auto;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You're just getting in a bit

You're just getting in a bit of a mess by overstating everything, with menus such as this you have to be very methodical dealing with descendent selectors ensuring that you aren't compounding or overriding properties, you have far too much going on with widths try removing all widths bar the li and sub ul and remove the left/right padding on the anchors, you are also going to have to consider that there is a finite amount of space to work in if you're going to have two word links and at that font size then I think you will have problems, I would reduce your font size down.

Basically just start again from the top of the menu properties and re-think your sizings.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sejf83
Offline
Enthusiast
London
Last seen: 13 years 15 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Thanks. Even when I remove

Thanks. Even when I remove most of the widths, there is still way too much space around the shorter link text and not enough around the longer ones. The only way I can think of to fix that is to a) use images instead of actual text or b) make a new class for each li tag with a different width.

Do I have any other options you can think of?

Thanks again for your help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

But that will be the case:?

But that will be the case :? if you have different length/amount words and are trying to work to a fixed width evenly spaced set of li boxes, you could remove the widths from the top level lists and let the floats shrinkwrap to the contents but that is going to look odd, reduce the font-size and center, think about single word links.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me