Skip to content

Instantly share code, notes, and snippets.

@halgatewood

halgatewood/Expanding CSS3 Menu

Created April 6, 2012 18:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save halgatewood/2321849 to your computer and use it in GitHub Desktop.
Save halgatewood/2321849 to your computer and use it in GitHub Desktop.
Download ZIP
Simple CSS3 Menu where the menu items expand on mouse over.
Raw
Expanding CSS3 Menu
<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