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!