Created
January 18, 2014 20:51
-
-
Save reedriley/8496247 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#nav{ | |
list-style:none; | |
font-weight:bold; | |
margin-bottom:10px; | |
/* Clear floats */ | |
float:left; | |
width:100%; | |
/* Bring the nav above everything else--uncomment if needed. | |
position:relative; | |
z-index:5; | |
*/ | |
} | |
#nav li{ | |
float:left; | |
margin-right:10px; | |
position:relative; | |
} | |
#nav a{ | |
display:block; | |
padding:5px; | |
color:#fff; | |
background:#333; | |
text-decoration:none; | |
} | |
#nav a:hover{ | |
color:#fff; | |
background:#6b0c36; | |
text-decoration:underline; | |
} | |
#nav ul{ | |
background:#fff; <span class="code-comment">/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */</span> | |
background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span> | |
list-style:none; | |
position:absolute; | |
left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */ | |
} | |
#nav ul li{ | |
padding-top:1px; | |
float:none; | |
} | |
#nav ul a{ | |
white-space:nowrap; | |
} | |
#nav li:hover ul{ | |
left:0; | |
} | |
#nav li:hover a{ | |
background:#6b0c36; | |
text-decoration:underline; | |
} | |
#nav li:hover ul a{ | |
text-decoration:none; | |
} | |
#nav li:hover ul li a:hover{ | |
background:#333; | |
}</code> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment