Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple CSS3 Menu where the menu items expand on mouse over.
<html>
<head>
<title>moveable Menu</title>
<style>
body { padding: 0; margin: 0; font-family: arial; font-size: 0.9em; }
nav { margin: 25px auto; width: 960px; padding: 10px 25px; border: solid 1px #ccc; border-left: none; border-right: none;}
nav a {
color: #666;
text-decoration: none;
padding: 5px 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
nav a:hover { padding: 5px 25px; background: #666; color: #fff; }
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Projects</a>
<a href="#">Clients</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment