Skip to content

Instantly share code, notes, and snippets.

@mundry

mundry/index.html

Last active December 30, 2015 14:59
Show Gist options
  • Save mundry/7845313 to your computer and use it in GitHub Desktop.
Save mundry/7845313 to your computer and use it in GitHub Desktop.
Download ZIP
Dropdown menu. Does not work (properly) with less than IE9.
Raw
index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dropdown</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<!--[if lt IE 7]> <body class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <body class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <body class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <body> <!--<![endif]-->
<div id="nav">
<ul class="menu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a>
<ul class="sub-menu">
<li><a href="#">link2.1</a></li>
<li><a href="#">link2.2</a></li>
<li><a href="#">link2.3</a></li>
</ul>
</li>
<li><a href="#">link3</a>
</li>
<li><a href="#">link4</a>
<ul class="sub-menu">
<li><a href="#">link4.1</a></li>
<li><a href="#">link4.2</a></li>
<li><a href="#">link4.3</a></li>
</ul>
</li>
<li><a href="#">link5</a>
<ul class="sub-menu">
<li><a href="#">link5.1</a></li>
<li><a href="#">link5.2</a></li>
<li><a href="#">link5.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Raw
style.css
ul.menu, ul.sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu > li > a, ul.sub-menu > li > a {
display: block;
text-decoration: none;
padding: 20px;
font-size: 20px;
}
ul.menu > li {
display: inline-block;
position: relative;
background-color: #FFAA00;
}
ul.menu > li:hover > ul.sub-menu {
display: block;
}
ul.menu > li > a {
color: #2476f3;
}
ul.sub-menu {
display: none;
position: absolute;
top: 64px;
}
ul.sub-menu > li {
width: 150px;
background-color: #1A8EC5;
}
ul.sub-menu > li > a {
color: #F3A124;
}
ul.sub-menu > li > a:hover {
background-color: #FF6347;
}
Raw
style.scss
%list-reset {
list-style: none;
margin: 0;
padding: 0;
}
%list-link {
display: block;
text-decoration: none;
padding: 20px;
font-size: 20px; // == 1.25em
// text-align: left;
}
ul.menu {
@extend %list-reset;
// text-align: center;
> li {
display: inline-block;
position: relative;
background-color: #FFAA00;
&:hover {
> ul.sub-menu {
display: block;
}
}
> a {
@extend %list-link;
color: complement(#F3A124);
}
}
}
ul.sub-menu {
@extend %list-reset;
display: none;
position: absolute;
// Correlates to the chosen font size.
// Font sizes in em's may need experimentation.
// The dropdown may not align the same way in Opera as in Firefox or
// Chrome.
top: 64px;
> li {
width: 150px;
background-color: #1A8EC5;
> a {
@extend %list-link;
color: #F3A124;
&:hover {
background-color: #FF6347;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment