mundry/index.html

## 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>

## 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;
}

## 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;
      }
    }
  }
}
	<!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>
	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;
	}
	%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;
	}
	}
	}
	}