float 가로 메뉴

"> 11-06_float-menu

float 가로 메뉴

"> 11-06_float-menu

float 가로 메뉴

"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-06_float-menu</title>
<style type="text/css">
* {
	margin:0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	color: navy;
}

/* gnb 메뉴 */
.gnb li {
	/* border: 1px solid blue; */
	width: 140px;
	height: 30px;
	float: left;
	margin-left: 5px;
}
.gnb li a {
	display: block;
	height: 30px;
	background-color: navy;
	color: white;
	text-align: center;
	padding-top: 6px;
}
.gnb li a:hover {
	background: purple;
	font-weight: bold;
}

</style>
</head>
<body>
	<h1>float 가로 메뉴</h1>
	<ul class="gnb">
		<li><a href="#">메뉴 1 </a></li>
		<li><a href="#">메뉴 2 </a></li>
		<li><a href="#">메뉴 3 </a></li>
		<li><a href="#">메뉴 4 </a></li>
		<li><a href="#">메뉴 5 </a></li>
	</ul>

</body>
</html>