Help with really annoying Nav bar!

Hi there guys! ok so i’ve been playing around with my nav bar for HOURS! cant get the tabs to spread evenly (too many letters could be why) Also, the drop down boxes dont match the same width as the main nav bar tab…its for my blog www.theninjatravels.com but im practicing on another site: http://dinthairesa.blogspot.com/

the CSS im playing with is:
#suckerfishnav {
background:#f3f3f3 repeat-x;
font-size:12px;
font-family:verdana,sans-serif;
font-weight:bold;
width:890px;
border:1px solid #cc0000;

}

#suckerfishnav, #suckerfishnav ul {
float:left;
line-height:35px;
padding:0;
border:1px solid #cc0000;
margin:0;
width:890px;

}

#suckerfishnav a {
display:block;
color:#cc0000;
text-decoration:none;
padding:0px 11px ;

}

#suckerfishnav li {
float:left;

padding: 0px 5px;
margin-right: 2px;
}
#suckerfishnav ul {
position:absolute;z-index:100;
left:-999em;
height:auto;
width:108px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
border-top:1px solid #cc0000;

}

#suckerfishnav li li {
width:108px;
border-bottom:1px solid #cc0000;
border-left:1px solid #cc0000;
border-right:1px solid #cc0000;
font-weight:bold;
font-family:verdana,sans-serif;

}

#suckerfishnav li li a {
padding:4px 4x;
width:auto;
font-size:11px;
color:#cc0000;

}

#suckerfishnav li ul ul {
width:108px;
margin:-21px 0 0 100px;

}

#suckerfishnav li li:hover {
width:108px;
background:#294962;

}

#suckerfishnav li:hover, #suckerfishnav li.hover {
width:autopx;
position:left;
left: 0;

}
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {

color:#ff9900;
}

#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#ff9900;
}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
color:#cc0000;
}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
left:auto;
}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
left:auto;
background:#f3f3f3;
}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:#294962;
}

any help would be much appreciated!

:slight_smile:

Hi theninjatravels. Welcome to the forums. :slight_smile:

First thing I’d suggest is to remove the margin and padding from the LIs:


#suckerfishnav li {
    float: left;
    [COLOR="#FF0000"]margin-right: 2px;
    padding: 0 5px;[/COLOR]
}

Then maybe increase the padding on the As themselves:


#suckerfishnav a {
    color: #CC0000;
    display: block;
    padding: 0 [COLOR="#0000CD"]15[/COLOR]px;
    text-decoration: none;
}

That will align your sub menus to the left of your main links. Then you can just choose a width for your drop menus:


#suckerfishnav ul {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CC0000 -moz-use-text-color -moz-use-text-color;
    border-right: 0 none;
    border-style: solid none none;
    border-width: 1px 0 0;
    font-weight: normal;
    height: auto;
    left: -999em;
    line-height: 1;
    margin: 0;
    position: absolute;
    width: [COLOR="#0000CD"]108px[/COLOR];
    z-index: 100;
}

and here


#suckerfishnav li li {
    border-bottom: 1px solid #CC0000;
    border-left: 1px solid #CC0000;
    border-right: 1px solid #CC0000;
    font-family: verdana,sans-serif;
    font-weight: bold;
    width: [COLOR="#0000ff"]108px[/COLOR];
}

Hi Ralph thanks so much for your suggestions. ive made the changes u mentioned however the top tabs in the nav bar still dont display at the same width and the drop down bars still dont match the width of the top nav bar tabs. if u take a look at http://dinthairesa.blogspot.com/ you’ll see what i mean when you hover over.

thanks again for your help. :slight_smile:

You want them all at the same width? In that case, set all the LIs to about width: 110px, remove the padding of the <a>s and sent them to text-align: center. Then sut the width of the sub ULs to width: 110px as well.

However, I don’t know that it will look so good. Some of the top LIs will look cramped, other will have a lot of space around them. That’s why I think it’s better to have the same padding around the text of each top link.