December 26th, 2012, 10:43 AM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 1
Time spent in forums: 8 m 8 sec
Reputation Power: 0
|
|
|
Dropdown Navigation
Hi, I was wondering if someone could help me with a dropdown navigation bar I've coded. It's all CSS. The problem is, even though I have the overflow hidden, when you hover on a topic that has sub-links, it pushes everything else down. You can see it at http://thestreetlight.net/clients/thearmoire. Or, I'll just copy and paste the code here if you prefer to look at it that way. Thanks in advance!
Code:
/* Navigation */
/* ---------------------------------------------------------- */
#navi {
width: 620px;
text-align: center;
text-transform: lowercase;
font-family: 'Muli', Arial, sans-serif;
font-size: 13px;
letter-spacing: 1px;
color: #fff;
padding: 0;
margin: 0;
}
ul#navi a {
text-decoration: none;
color: #cacaca;
background-color: #fff;
padding: 3px 7px 3px 7px;
}
/* bg was #ede0cb */
ul#navi a:hover {
text-decoration: none;
color: #fff;
background-color: #f4e0c1;
}
ul#navi {
width: 620px;
list-style: none;
padding: 0 0 0 70px;
margin: 0 auto;
}
ul#navi li {
display: inline;
list-style: none;
float: left;
padding: 0;
margin: 4px;
}
ul#navi li ul {
display: none;
}
ul#navi li a {
display: block;
text-decoration: none;
}
ul#navi li:hover ul {
display: block;
text-align: left;
}
ul#navi li:hover li {
float: none;
text-align: left;
}
ul#navi:hover {
width: 620px;
}
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
