CSS float menu

으누·2024년 9월 12일

* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	color: black;
}

/* snb */
.snb {
 	border: 1px solid blue; 
	width: 140px;
}
.snb > li {
	border: 1px solid blue;

}
.snb > li > a {
	display: block;
	height: 30px;
	text-align: center;
	padding-top: 10px;
}
.snb > li > a:hover {
	background-color: skyblue;
	font-weight: bold;
}

<body>
	<h1>float 세로 메뉴</h1>
	<ul class="snb">
		<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>

으누

코딩 일기장

이전 포스트

CSS float clear

다음 포스트

CSS float menu

CSS float clear

CSS float menu (2)

0개의 댓글