Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This simple navigation menu demonstrates how to create a main navigation menu with drop down sub-menus using just CSS.
/**
* CSS-only Menu
*/
/* Link set up */
nav a,
nav a:visited {
text-decoration: none;
}
/* Navigation menu - first level */
nav {
border-bottom: 4px solid #000;
box-shadow: 0 5px 0 #aaa;
height: 30px;
margin: 10px 0;
}
nav > ul {
background: #000;
display: block;
float: left;
margin: 0 0 0 10px;
}
nav > ul > li {
float: left;
}
nav > ul > li > a {
border: solid #555;
border-width: 1px 1px 4px;
color: #fff;
display: block;
margin: 0;
padding: 9px 30px;
text-transform: uppercase;
}
nav > ul > li:first-child > a {
border-left: 0;
}
nav > ul > li:hover > a {
border-bottom: 3px solid #fff;
color: #fff;
}
/* Navigation menu - first level, active */
nav a.active,
nav a.active:hover,
nav ul > li:hover > a.active {
background: #000;
border-bottom: 3px solid #ee0;
color: #ee0; }
/* Navigation menu - second level */
nav ul > li ul {
background: #fff;
border: 1px solid #000;
box-shadow: 2px 2px 4px #999;
display: none; margin: 0;
position: absolute;
z-index: 1000;
}
nav ul > li li {
float: none;
}
nav ul > li li a {
color: #000;
display: block;
margin: 0 1px;
padding: 8px 20px;
}
nav ul > li:hover ul {
display: block;
}
nav ul > li li:hover {
background: #DDD;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Menu</title>
<link type="text/css" rel="stylesheet" href="css-only-menu.css" />
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#" class="active">Products</a>
<ul>
<li><a href="#">Sub Menu #1</a></li>
<li><a href="#">Sub Menu #2</a></li>
<li><a href="#">Sub Menu #3</a></li>
<li><a href="#">Sub Menu #4</a></li>
</ul>
</li>
<li><a href="#">Categories</a></li>
<li>
<a href="#">About Us</a>
<ul>
<li><a href="#">Sub Menu #1</a></li>
<li><a href="#">Sub Menu #2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.