Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple menu with a :hover action
/**
* A simple menu with a :hover action
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
font: 100%/2.5 helvetica, arial;
}
ul {
margin: 0;
padding: 0;
list-style: none;
background: hsla(0, 100%, 0%, .5);
overflow: hidden;
}
nav > ul > li {
float: left;
}
nav a {
display: block;
padding: .2em 1em;
border: solid hsla(0, 100%, 100%, .5);
border-width: 0 1px 0 0;
text-decoration: none;
color: white;
transition: .3s;
}
nav a:hover {
background: hsla(0, 100%, 100%, .5);
color: black;
}
li ul {
position: absolute;
opacity: 0;
height: 0;
transition: .3s;
}
li:hover ul {
opacity: 1;
height: auto;
}
<nav>
<ul>
<li>
<a href="http://www.smashingmagazine.com/" target="_blank">Home</a>
<ul>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a></li>
<li><a href="http://vasilis.nl/" target="_blank">Vasilis van Gemert</a></li>
</ul>
</li>
<li>
<a href="http://www.smashingmagazine.com/" target="_blank">Old Habits</a>
<ul>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Screen sizes</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Everybody has a mouse</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Broadband internet</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Faster computers</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Calibrated monitors</a></li>
</ul>
</li>
<li>
<a href="http://www.smashingmagazine.com/" target="_blank">New Defaults</a>
<ul>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Activate</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Small screens</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Content</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Command line</a></li>
</ul>
</li>
</ul>
</nav>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment