coreyti/gist:2789154

## gistfile1.html
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>css-only menu</title>
  <style type="text/css" media="screen">
    div#page {
      margin      : 0 auto;
      width       : 940px;
    }

    ul {
      list-style  : none;
      margin      : 0;
      padding     : 0;
    }

    nav {
      border      : 1px solid #999;
    }

    /*
     * switch to float: left if space between menus is a concern. note that
     * overflow: hidden is probably NOT what you want, as that will cut of
     * the open menus/
     */
    nav > ul > li {
      position    : relative;
      display     : inline-block;
      line-height : 20px;
      height      : 20px;
      padding     : 2px 10px;
      border-left : 1px dotted #999;
    }

    nav > ul > li:first-child {
      border-left : none;
    }

    nav > ul > li span.label {
      position    : relative;
    }

    div.menu {
      display     : none;
      position    : absolute;
      top         : -1px; /* adjust as needed to counter parent border */
      left        : -1px;
      z-index     : 1;
      padding-top : 24px; /* adjust as needed per parent height + padding */
      border      : 1px solid #999;
      background  : rgba(255,255,255,0.8);
    }

    div.menu li {
      width       : 140px;
      padding     : 2px 10px;
      border-top  : 1px dotted #999;
    }

    /*
     * activation
     */

    /* on hover over the parent (which technically includes the menu), show the menu */
    nav > ul > li:hover div.menu {
      display     : block;
    }

    /* make sure the parent's label shows up. value should be higher than that of the menu */
    nav > ul > li:hover span.label {
      z-index     : 2;
    }
  </style>
</head>

<body>
  <div id="page">
    <nav>
      <ul>
        <li>
          <span class="label">menu one</span>
          <div class="menu">
            <ul>
              <li>item one</li>
              <li>item two</li>
            </ul>
          </div>
        </li>

        <li>
          <span class="label">menu two</span>
          <div class="menu">
            <ul>
              <li>item one</li>
              <li>item two</li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>css-only menu</title>
	<style type="text/css" media="screen">
	div#page {
	margin : 0 auto;
	width : 940px;
	}

	ul {
	list-style : none;
	margin : 0;
	padding : 0;
	}

	nav {
	border : 1px solid #999;
	}

	/*
	* switch to float: left if space between menus is a concern. note that
	* overflow: hidden is probably NOT what you want, as that will cut of
	* the open menus/
	*/
	nav > ul > li {
	position : relative;
	display : inline-block;
	line-height : 20px;
	height : 20px;
	padding : 2px 10px;
	border-left : 1px dotted #999;
	}

	nav > ul > li:first-child {
	border-left : none;
	}

	nav > ul > li span.label {
	position : relative;
	}

	div.menu {
	display : none;
	position : absolute;
	top : -1px; /* adjust as needed to counter parent border */
	left : -1px;
	z-index : 1;
	padding-top : 24px; /* adjust as needed per parent height + padding */
	border : 1px solid #999;
	background : rgba(255,255,255,0.8);
	}

	div.menu li {
	width : 140px;
	padding : 2px 10px;
	border-top : 1px dotted #999;
	}

	/*
	* activation
	*/

	/* on hover over the parent (which technically includes the menu), show the menu */
	nav > ul > li:hover div.menu {
	display : block;
	}

	/* make sure the parent's label shows up. value should be higher than that of the menu */
	nav > ul > li:hover span.label {
	z-index : 2;
	}
	</style>
	</head>

	<body>
	<div id="page">
	<nav>
	<ul>
	<li>
	<span class="label">menu one</span>
	<div class="menu">
	<ul>
	<li>item one</li>
	<li>item two</li>
	</ul>
	</div>
	</li>

	<li>
	<span class="label">menu two</span>
	<div class="menu">
	<ul>
	<li>item one</li>
	<li>item two</li>
	</ul>
	</div>
	</li>
	</ul>
	</nav>
	</div>
	</body>
	</html>