elijahmanor/_snippet.html

## _snippet.html
<ul id="menu">
    <li><a href="#">Browsers</a>
        <ul>
          <li><a href="#">Firefox</a></li>
          <li><a href="#">Google Chrome</a></li>
          <li><a href="#">Internet Explorer</a></li>
          <li><a href="#">Opera</a></li>
          <li><a href="#">Safari</a></li>
      </ul>
    </li>
    <li><a href="#">Editors</a>
        <ul>
            <li><a href="#">Sublime Text 2</a></li>
            <li><a href="#">TextMate</a></li>
            <li><a href="#">Visual Studio</a></li>
            <li><a href="#">WebStorm</a></li>
      </ul>
    </li>
    <li><a href="#">Languages</a>
        <ul>
            <li><a href="#">C#</a></li>
            <li><a href="#">CoffeeScript</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Ruby</a></li>
            <li><a href="#">Visual Basic</a></li>
        </ul>
    </li>
</ul>

## fiddle.html
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }

  /* http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery */

  #menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
  }
  #menu a:link, #menu a:active, #menu a:visited{
    display: block;
    padding: 0px 5px;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    background-color: #333;
  }

  #menu a:hover {
    background-color: #fff;
    color: #333;
  }

  #menu li {
    float: left;
    position: relative;
  }

  #menu ul {
    position: absolute;
    width: 12em;
    top: 1.5em;
    display: none;
  }

  #menu li ul a {
    width: 12em;
    float: left;
  }

  #menu ul ul{
    top: auto;
  }

  #menu li ul ul {
    left: 12em;
    margin: 0px 0 0 10px;
  }
</style>
</head>
<body>

  <ul id="menu">
      <li><a href="#">Browsers</a>
          <ul>
            <li><a href="#">Firefox</a></li>
            <li><a href="#">Google Chrome</a></li>
            <li><a href="#">Internet Explorer</a></li>
            <li><a href="#">Opera</a></li>
            <li><a href="#">Safari</a></li>
        </ul>
      </li>
      <li><a href="#">Editors</a>
          <ul>
              <li><a href="#">Sublime Text 2</a></li>
              <li><a href="#">TextMate</a></li>
              <li><a href="#">Visual Studio</a></li>
              <li><a href="#">WebStorm</a></li>
        </ul>
      </li>
      <li><a href="#">Languages</a>
          <ul>
              <li><a href="#">C#</a></li>
              <li><a href="#">CoffeeScript</a></li>
              <li><a href="#">JavaScript</a></li>
              <li><a href="#">Ruby</a></li>
              <li><a href="#">Visual Basic</a></li>
          </ul>
      </li>
  </ul>

</body>
</html>

## fiddle.js
$( document ).ready( function() {

    $( "#menu li" ).hover(
        function() {
            $( this ).find( "ul" ).slideDown();
        },
        function() {
            $( this ).find( "ul" ).slideUp();
        });

});
	<ul id="menu">
	<li><a href="#">Browsers</a>
	<ul>
	<li><a href="#">Firefox</a></li>
	<li><a href="#">Google Chrome</a></li>
	<li><a href="#">Internet Explorer</a></li>
	<li><a href="#">Opera</a></li>
	<li><a href="#">Safari</a></li>
	</ul>
	</li>
	<li><a href="#">Editors</a>
	<ul>
	<li><a href="#">Sublime Text 2</a></li>
	<li><a href="#">TextMate</a></li>
	<li><a href="#">Visual Studio</a></li>
	<li><a href="#">WebStorm</a></li>
	</ul>
	</li>
	<li><a href="#">Languages</a>
	<ul>
	<li><a href="#">C#</a></li>
	<li><a href="#">CoffeeScript</a></li>
	<li><a href="#">JavaScript</a></li>
	<li><a href="#">Ruby</a></li>
	<li><a href="#">Visual Basic</a></li>
	</ul>
	</li>
	</ul>
	<!DOCTYPE html>
	<html>
	<head>
	<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	article, aside, figure, footer, header, hgroup,
	menu, nav, section { display: block; }

	/* http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery */

	#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
	position: relative;
	line-height: 1.5em;
	}
	#menu a:link, #menu a:active, #menu a:visited{
	display: block;
	padding: 0px 5px;
	border: 1px solid #333;
	color: #fff;
	text-decoration: none;
	background-color: #333;
	}

	#menu a:hover {
	background-color: #fff;
	color: #333;
	}

	#menu li {
	float: left;
	position: relative;
	}

	#menu ul {
	position: absolute;
	width: 12em;
	top: 1.5em;
	display: none;
	}

	#menu li ul a {
	width: 12em;
	float: left;
	}

	#menu ul ul{
	top: auto;
	}

	#menu li ul ul {
	left: 12em;
	margin: 0px 0 0 10px;
	}
	</style>
	</head>
	<body>

	<ul id="menu">
	<li><a href="#">Browsers</a>
	<ul>
	<li><a href="#">Firefox</a></li>
	<li><a href="#">Google Chrome</a></li>
	<li><a href="#">Internet Explorer</a></li>
	<li><a href="#">Opera</a></li>
	<li><a href="#">Safari</a></li>
	</ul>
	</li>
	<li><a href="#">Editors</a>
	<ul>
	<li><a href="#">Sublime Text 2</a></li>
	<li><a href="#">TextMate</a></li>
	<li><a href="#">Visual Studio</a></li>
	<li><a href="#">WebStorm</a></li>
	</ul>
	</li>
	<li><a href="#">Languages</a>
	<ul>
	<li><a href="#">C#</a></li>
	<li><a href="#">CoffeeScript</a></li>
	<li><a href="#">JavaScript</a></li>
	<li><a href="#">Ruby</a></li>
	<li><a href="#">Visual Basic</a></li>
	</ul>
	</li>
	</ul>

	</body>
	</html>
	$( document ).ready( function() {

	$( "#menu li" ).hover(
	function() {
	$( this ).find( "ul" ).slideDown();
	},
	function() {
	$( this ).find( "ul" ).slideUp();
	});

	});