CSS float menu (2)
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
/* gnb */
.gnb > li {
/* border: 1px solid blue; */
width: 140px;
height: 30px;
margin-left: 4px;
float: left;
}
.gnb > li > a {
display: block;
height: 30px;
padding-top: 4px;
background-color: navy;
color: white;
text-align: center;
}
.gnb > li > a:hover {
background-color: royalblue;
font-weight: bold;
}<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>
코딩 일기장