PDA

View Full Version : Drop-Down Menu Customization



spinenergy
14 May 2011, 01:50 PM
Hey everybody! I'm looking for a way to (1) make the menu background 4 px bigger than the font and then center the text vertically inside the background. And (2) to get rid of the white borders. Below is the CSS for my menu. My site is http://passionispain.com so you have a refrence. What do I do? Thanks for any help!

#outside{
border:1px solid #000000;
background:#000000;
float:right;
}

#navigation-1 {
padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:19px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 15pt verdana, arial, helvetica;
}

#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:100px;
}

#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#000000;
color:#ffffff;
width:100px;
height:19px;
}

#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#666666;
color:#ffffff;
width:100px;
height:19px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}

#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:100px;
position:absolute;
top:19px;
left:-1px;
border:1px solid #000000;
border-top:none;
}

#navigation-1 li:hover ul.navigation-2 {
display:block;
}

#navigation-1 li ul.navigation-2 li {
width:100px;
clear:left;
width:100px;
}

#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#000000;
padding:4px 0;
width:100px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}

#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#666666;
padding:4px 0;
width:100px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #000000;
border-left:1px solid #000000;
background:#ffffff;
z-index:900;
}

#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#000000;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#666666;
}

#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:15pt;
color:#fe676f;
}

#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:15pt;
color:#ffffff;
}