Skip to content

Instantly share code, notes, and snippets.

@dnshl

dnshl/drop-down-navigation.html

Created December 17, 2011 22:51
Show Gist options
  • Save dnshl/1491688 to your computer and use it in GitHub Desktop.
Save dnshl/1491688 to your computer and use it in GitHub Desktop.
Download ZIP
Simple CSS drop down navigation
Raw
drop-down-navigation.html
<!DOCTYPE html>
<html lang="de">
<head>
<title>drop-down-navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* navigation */
.navigation {
font-family: sans-serif;
overflow: auto;
}
.navigation ul {
position: absolute;
visibility: hidden;
}
/* fix border offset */
.navigation > li > ul {
margin-left: -1px;
}
.navigation ul ul {
left: 100%;
margin-top: -27px;
}
.navigation > li {
float: left;
}
.navigation li {
border: 1px solid grey;
}
.navigation li li {
border-top: none;
}
.navigation > li > ul > li:first-child {
border-top: 1px solid grey;
}
/* fix border offset */
.navigation li li li {
margin-left: -1px;
}
.navigation li li ul {
background-color: grey;
padding-top: 1px;
}
.navigation li:hover > ul {
visibility: visible;
}
.navigation,
.navigation a {
background-color: #EEEEEE;
}
.navigation a {
color: #333333;
display: block;
font-size: 16px;
padding: 5px 18px;
text-decoration: none;
}
.navigation a:hover {
background-color: grey;
color: #FFFFFF;
}
</style>
</head>
<body>
<ul class="navigation">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li class="dir">
<a href="#">Link 3</a>
<ul>
<li><a href="#">Link 4</a></li>
<li class="dir">
<a href="#">Link 5</a>
<ul>
<li class="dir">
<a href="#">Link 8</a>
<ul>
<li>
<a href="#">Link 12</a>
</li>
<li class="last">
<a href="#">Link 13</a>
</li>
</ul>
</li>
<li class="last">
<a href="#">Link 9</a>
</li>
</ul>
</li>
<li class="dir">
<a href="#">Link 6</a>
<ul>
<li class="dir">
<a href="#">Link 10</a>
<ul>
<li>
<a href="#">Link 14</a>
</li>
<li class="last">
<a href="#">Link 15</a>
</li>
</ul>
</li>
<li class="last">
<a href="#">Link 11</a>
</li>
</ul>
</li>
<li class="last">
<a href="#">Link 7</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment