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 9:51 pm
#106109
MBMParticipant
Thanks. I initially pasted code from the wrong menu. I’ve make the changes you suggested but the drop down items are still visible.
#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;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#navigation li:first-child {
border-left: 2px solid #ffffff;
margin-left: 25%;
}
#navigation li:last-child {
border-right: 2px solid #ffffff;
margin-right:-30%;
}
#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;
}
#menu li:hover ul {
display:block;
}
#navigation li .active {
color: #066;
}