Skip to content

Instantly share code, notes, and snippets.

@AlanSimpsonMe

AlanSimpsonMe/CSS Dropdown Menu

Last active December 15, 2021 17:57
Show Gist options
  • Save AlanSimpsonMe/ad187247dc861561cc32202ea3cc7b64 to your computer and use it in GitHub Desktop.
Save AlanSimpsonMe/ad187247dc861561cc32202ea3cc7b64 to your computer and use it in GitHub Desktop.
Download ZIP
Super Simple CSS Dropdown Menu
Raw
CSS Dropdown Menu
<!DOCTYPE html>
<html>
<head>
<title>Clean, Simple CSS Drop-Down Menu</title>
<meta name="description" content="Clean, simple CSS3 dropdown menu." />
<meta name="author" content="Alan Simpson" />
<style>
/* Probably about the cleanest, simplest CSS-only drop-down menu you'll find. */
/* To make older browser HTML5 aware (optional, probably not needed anymore) */
nav{
width:900px;
margin:0 auto;
}
/* Top level menu bar */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12pt;
color: Black;
position: relative;
}
/* Each list item inside horizontal menu bar */
nav ul li {
float: left;
width: 20%;
}
/* Text and links across navbar */
nav span, nav a {
background: #40BCF6;
text-decoration: none;
outline: none;
display: block;
height: 40px;
line-height: 40px;
width: 100%;
text-align: center;
}
/* Span and unvisited/visited links in horizontal bar */
nav a:link, nav a:visited {
background: #40BCF6;
color: Black;
}
/* Hover and active links in horizontal bar */
nav span:hover, nav a:hover, nav a:active {
background: #1C415D;
color: Yellow;
}
/* Drop-down menu for each item in menu bar */
nav ul li ul {
visibility: hidden;
background: #40A2EE;
box-shadow: 0 40px 40px -20px black inset;
position: absolute;
/* Set any width you like */
width: 180px;
z-index: 1200;
}
/* Drop-down menu for each item in menu bar */
nav ul li:hover ul {
visibility: visible;
}
/* Individual list items in drop-down menus */
nav ul li ul li {
width: 100%;
height: 44px;
line-height: 44px;
float: none;
}
/* Links in drop-down menus */
nav ul li ul li a,
nav ul li ul li a:link,
nav ul li ul li a:visited {
background: none;
display: block;
text-align: left;
text-indent: 10%;
width: 100%;
height: 100%;
color: White;
text-decoration: none;
outline: none;
}
/* Hover and active states in drop down menu */
nav ul li ul li a:hover,
nav ul li ul li a:active {
background: #15619B;
color: Yellow;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<span>Top 2</span> <ul>
<li><a href="#">Sub 2-1</a></li>
<li><a href="#">Sub 2-2</a></li>
<li><a href="#">Sub 2-3</a></li>
</ul>
</li>
<li>
<span>Top 3</span> <ul>
<li><a href="#">Sub 3-1</a></li>
<li><a href="#">Sub 3-2</a></li>
<li><a href="#">Sub 3-3</a></li>
<li><a href="#">Sub 3-4</a></li>
</ul>
</li>
<li>
<span>Top 4</span> <ul>
<li><a href="#">Sub 4-1</a></li>
<li><a href="#">Sub 4-2</a></li>
</ul>
</li>
<li>
<span>Top 5</span> <ul>
<li><a href="#">Sub 5-1</a></li>
<li><a href="#">Sub 5-2</a></li>
<li><a href="#">Sub 5-3</a></li>
<li><a href="#">Sub 5-4</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