enlacee/menu-html-css-responsive.html

## menu-html-css-responsive.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<div class='bbt-menu'>
		<nav>
			<label for='drop' class='toggle'>Menu <span>&#9776;</span></label>
			<input type='checkbox' id='drop' />
			<ul class='menu'>
				<li><a href='/'>Home</a></li>
				<li><a href='#'>About</a></li>
				<li>
					<!-- First Tier Drop Down -->
					<label for='drop-1' class='toggle'>Service <span>&#9776;</span></label>
					<a href='#'>Service &#9776;</a>
					<input type='checkbox' id='drop-1'/>
					<ul>
						<li><a href='#'>Service 1</a></li>
						<li><a href='#'>Service 2</a></li>
						<li><a href='#'>Service 3</a></li>
					</ul>
				</li>
				<li><a href='#'>Contact</a></li>
				<li>
				<!-- First Tier Drop Down -->
				<label for='drop-2' class='toggle'>Portfolio <span>&#9776;</span></label>
				<a href='#'>Portfolio &#9776;</a>
				<input type='checkbox' id='drop-2'/>
				<ul>
					<li><a href='#'>Portfolio 1</a></li>
					<li><a href='#'>Portfolio 2</a></li>
					<li>
						<!-- Second Tier Drop Down -->
						<label for='drop-3' class='toggle'>Works <span>&#9776;</span></label>
						<a href='#'>Works &#9776;</a>
						<input type='checkbox' id='drop-3'/>
						<ul>
							<li><a href='#'>HTML/CSS</a></li>
							<li><a href='#'>jQuery</a></li>
							<li><a href='#'>Python</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href='#'>FAQ</a></li>
		  </ul>
		</nav>
	</div>

<style type="text/css">
	.toggle,
	[id^=drop] {
		display: none;
	}
	.bbt-menu{background:gray;width:100%;}
	nav {
		width:100%;
		padding:0;
	}
	nav:after {
		content: '';
		display: table;
		clear: both;
	}
	nav ul {
		float:left;
		padding: 0;
		margin: 0;
		list-style: none;
		position: relative;
	}
	nav ul li {
		margin: 0px;
		display: inline-block;
		float: left;
		background: gray; /*** Warna latar horizontal menu***/
	}
	nav a, nav a:hover,
	nav a:visited {
		display: block;
		color: white;
		font-size: 1.2em;
		line-height: 3em;
		text-decoration: none;
	}
	nav ul li a,
	nav ul ul li a,
	nav ul ul ul li a {
		padding: 0  1.3em;
		margin: 0
	}
	nav ul li:hover,
	nav ul li ul li, /* second level */
	nav ul li ul li:hover,
	nav a:hover{
		background: black;
	}
	/* third level */
	nav ul li ul li a:hover {
		background-color: #111;
	}
	nav ul ul {
		display: none;
		position: absolute;
		top:100%;
	}
	/* SHOW AND HIDE SUBMENUS */
	nav ul li:hover > ul {
		display: inherit;
		background: yellow;
		color:red;
	}
	nav ul ul li {
		width: 10em; /*** Lebar Down Menu ***/
		float: none;
		display: list-item;
		position: relative;
	}
	nav ul ul ul {
		position: absolute;
		top: 0;
		left: 10em;
	}

	/* mobile menu*/
	nav > label {
		text-align: center;
	}
	nav label span{
		float:right;
	}
	nav > label > span{
		float:none;
	}
	nav input[type=checkbox]{
		display: none;
	}

	/* Media Queries
	*******************************************/

	@media all and (max-width : 768px) {

		nav {
			margin: 0;
		}
		.toggle + a,
		.menu {
			display: none;
		}
		.toggle {
			display: block;
			background-color:black;
			padding: 0 20px;
			color: #FFF;
			font-size: 20px;
			line-height: 60px;
			text-decoration: none;
			border: none;
		}
		.toggle:hover {
			background-color: black;
		}
		/* Event to show and hide*/
		[id^=drop]:checked + ul {
			display: block;width: 100%;
		}
		nav ul li {
			display: block;
			width: 100%;
		}
		nav ul ul .toggle,
		nav ul ul a {
			padding: 0 40px;
		}nav ul ul ul a {
			padding: 0 80px;
		}
		nav a:hover,
		nav ul ul ul a {
			background-color: #000000;
		}
		nav ul li ul li .toggle,
		nav ul ul a {
			background-color: #212121;
		}
		nav ul ul {
			float: none;
			position: static;
			color: #ffffff;
		}
		nav ul ul li:hover > ul,
		nav ul li:hover > ul {
			display: none;
		}
		nav ul ul li {
			display: block;
			width: 100%;
		}
		nav ul ul ul {
			position: static;
		}
	}
</style>
</body>
</html>