Membuat Navbar Html Sederhana

<html>
	<head>
	<title>Navbar</title>
	<style>
	* {margin:0; padding:0;}
	 
	body {
	 background-color:#fff;
	 font-family:Arial, Helvetica, sans-serif;
	 color:#000;
	}

	nav {
	 margin:auto;
	 text-align: center;
	 width: 100%;
	} 

	nav ul ul {
	 display: none;
	}

	nav ul li:hover > ul{
	display: block;
	width: 150px;
	}

	nav ul {
	 background: #53bd84;
	 padding: 0 20px;
	 list-style: none;
	 position: relative;
	 display: inline-table;
	 width: 100%;
	}

	nav ul:after {
	 content: ""; 
	 clear:both; 
	 display: block;
	}

	nav ul li{
	 float:left;
	}

	nav ul li:hover{
	 background:#666;
	}

	nav ul li:hover a{
	 color:#fff;
	}

	nav ul li a{
	 display: block;
	 padding: 25px;
	 color: #fff;
	 text-decoration: none;
	}

	nav ul ul{
	 background: #53bd84;
	 border-radius: 0px;
	 padding: 0;
	 position: absolute;
	 top:100%;
	}

	nav ul ul li{
	 float:none;
	 border-top: 1px soild #53bd84;
	 border-bottom: 1px solid #53bd84;
	 position: relative;
	}

	nav ul ul li a{
	 padding: 15px 40px;
	 color: #fff;
	}

	nav ul ul li a:hover{
	 background-color: #666;
	}

	nav ul ul ul{
	 position: absolute;
	 left: 100%;
	 top: 0;
	}
	</style>
</head>
<body>
<nav>
	<ul>
	 	<li><a href="#">Home</a></li>
	 	<li><a href="#">Input</a>
		 	<ul>
			 	<li><a href="#">Anggota</a></li>
			 	<li><a href="#">Buku</a></li>
			 	<li><a href="#">Kategori Buku</a></li>
		 	</ul>
 		</li>
 		<li><a href="#">Transaksi</a>
		 	<ul>
			 	<li><a href="#">Peminjaman</a></li>
			 	<li><a href="#">Pengembalian</a></li>
		 	</ul>
		</li>
 		<li><a href="#" onClick="return confirm ('Yakin?')">Logout</a></li>
	</ul>
</nav>
</body>
</html>
Danial Akbar