React에서 메뉴를 작성할려고 하는데, 기본적인 메뉴를 작성하는 방법을 먼저 확인함.
파일은 Html & Css 파일이다.
Html
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu_wrap">
<ul class="dep1">
<li>
<a href="#">MENU 01</a>
<ul class="dep2">
<li><a href="#">MENU 01-01</a></li>
<li><a href="#">MENU 01-02</a></li>
<li><a href="#">MENU 01-03</a></li>
</ul>
</li>
<li>
<a href="#">MENU 02</a>
<ul class="dep2">
<li><a href="#">MENU 02-01</a></li>
<li><a href="#">MENU 02-02</a></li>
<li><a href="#">MENU 02-03</a></li>
</ul>
</li>
<li>
<a href="#">MENU 03</a>
<ul class="dep2">
<li><a href="#">MENU 03-01</a></li>
<li><a href="#">MENU 03-02</a></li>
<li><a href="#">MENU 03-03</a></li>
</ul>
</li>
<li>
<a href="#">444444</a>
<ul class="dep2">
<li><a href="#">111111-1111</a></li>
<li><a href="#">111111-2222</a></li>
<li><a href="#">111111-3333</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Style.css
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.menu_wrap .dep1 {
font-size: 0;
}
.menu_wrap .dep1 > li {
display: inline-block;
vertical-align: top;
width: 100px;
background: #ddd;
text-align: center;
font-size: 16;
}
.menu_wrap .dep1 > li:hover > a {
background: purple;
columns: #fff;
}
.menu_wrap .dep1 > li:hover > .dep2 {
display: block;
}
.menu_wrap .dep1 > li > a {
display: block;
padding: 10px 0;
}
.menu_wrap .dep2 {
display: none;
background: pink;
}
.menu_wrap .dep2 a {
display: block;
padding: 10px 0;
}
.menu_wrap .dep2 a:hover {
text-decoration: underline;
}