Home › Forums › CSS › Navigation Menu – Making Drop Down Links Invisible & Visible On Mouseover? › Re: Navigation Menu – Making Drop Down Links Invisible & Visible On Mouseover?
July 14, 2012 at 11:16 pm
#106120
MBMParticipant
The problem is I’m using a full width menu. I added margin-left: 25% to position the links in line with the header. If I remove margin-left 25% the links float to the left. When I add a bottom border to the last child element the border bleeds over to the next link (contact), it’s 2 pixels instead of 1. I also want a 2 pixel left and right border on all drop down links. I’ve uploaded the code so you can see for yourself. I’m getting coding dyslexia!
http://mbmitservices.co.uk/MMA/index.html
/*Navigation styling */
#navigation {
width: 100%;
margin-left:-10px;
height: 30px;
position: relative;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
text-transform: uppercase;
font-size: 22px;
background-color: #2864c4;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
#navigation ul {
padding: 0;
list-style: none;
}
#navigation li {
list-style: none;
display: block;
float: left;
width: 160px;
height: 28px;
padding-top:3px;
text-align: center;
background-color: #2864c4;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#navigation li:first-child {
margin-top:3px;
/*margin-left: 25%;*/
}
#navigation li:last-child {
border-bottom:2px solid #ffffff;
padding-bottom:3px;
}
#navigation li a {
color: #fff;
text-decoration: none;
display:block;
width:160px;
margin-top:-1px;
}
/*hide drop down links*/
#navigation li ul {
display:none;
position: absolute;
}
#navigation li a:hover {
background-color:#000000;
border: 0;
}
/*drop down styling*/
#navigation li:hover ul {
position:aboslute;
display:block;
width:160px;
margin-left:-1px;
padding-top:5px;
float:left;
text-align:left;
border:0;
}