Instantly share code, notes, and snippets.
thatdevgirl/css-only-menu.css
Created Dec 19, 2019
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