Skip to content

Instantly share code, notes, and snippets.

@melissacabral

melissacabral/css-dropdown.html

Created June 20, 2013 01:43
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 melissacabral/5819667 to your computer and use it in GitHub Desktop.
Save melissacabral/5819667 to your computer and use it in GitHub Desktop.
Download ZIP
css dropdown
Raw
css-dropdown.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pure CSS Dropdowns</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Meet The Team</a></li>
<li><a href="#">Our Company Culture</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service One</a></li>
<li><a href="#">Service Two</a></li>
<li><a href="#">Service Three</a></li>
<li><a href="#">Service Four</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product One</a></li>
<li><a href="#">Product Two</a></li>
<li><a href="#">Product Three</a></li>
<li><a href="#">Product Four</a></li>
<li><a href="#">Product Five</a></li>
<li><a href="#">Product Six with really long and unusual name</a></li>
</ul>
</li>
</ul>
</nav>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et lacus porta, fermentum leo at, gravida odio. Ut eu accumsan sem, vel gravida elit. Curabitur sed vestibulum sapien, non commodo ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in nisi id dolor consectetur vestibulum at tincidunt nunc. Vestibulum vel quam dignissim, sollicitudin mauris in, tempor purus. Pellentesque aliquam quam nisi, nec venenatis enim ullamcorper rhoncus. Duis convallis fermentum feugiat.
Donec condimentum lectus sit amet lorem egestas, ac accumsan urna vulputate. Integer elit lacus, iaculis eget sollicitudin et, dignissim vel lorem. Nulla faucibus nisl et tellus imperdiet, eu vulputate leo sagittis. Donec non purus ut tortor aliquam placerat vitae sed mauris. Sed porta elementum risus nec consequat. Quisque mollis, lectus quis consectetur bibendum, ante odio volutpat tortor, eu sodales turpis sem vitae mauris. Aliquam dapibus velit sed velit interdum placerat. Nam mattis at quam et tristique. Phasellus porta diam id nisl pharetra aliquam. Phasellus consequat dui eget purus hendrerit sollicitudin.
</main>
</body>
</html>
Raw
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment