Skip to content

Instantly share code, notes, and snippets.

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%, .4);
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;
<a href="" target="_blank">Home</a>
<li><a href="" target="_blank">Smashing Magazine</a></li>
<li><a href="" target="_blank">Vasilis van Gemert</a></li>
<a href="" target="_blank">Old Habits</a>
<li><a href="" target="_blank">Screen sizes</a></li>
<li><a href="" target="_blank">Everybody has a mouse</a></li>
<li><a href="" target="_blank">Broadband internet</a></li>
<li><a href="" target="_blank">Faster computers</a></li>
<li><a href="" target="_blank">Calibrated monitors</a></li>
<a href="" target="_blank">New Defaults</a>
<li><a href="" target="_blank">Activate</a></li>
<li><a href="" target="_blank">Small screens</a></li>
<li><a href="" target="_blank">Content</a></li>
<li><a href="" target="_blank">Command line</a></li>
// alert('Hello world!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment