20.11.24 BNX 사이트 메뉴 그대로 만들기

HTML

<div><a href="#">BNX</a></div>
<section>
|
<nav><a href="#">BRAND</a></nav>
|
<nav><a href="#">VISUAL</a></nav>
|
<nav><a href="#">STYLE</a></nav>
|
<nav><a href="#">MEDIA</a></nav>
|
<nav><a href="#">NEWS</a></nav>
|
<nav><a href="#">STORE</a></nav>
|
<nav><a href="#">CUSTOMER</a></nav>
|
</section>

CSS

div{
  text-align:center;
  font-size:5rem;
  font-weight:bold;
  letter-spacing:-10px;
}
div > a{
  text-decoration:none;
  color:black;
}
section {
  text-align:center;
  font-size:1rem;
  font-weight:bold;
  
}
section > nav{
  display:inline-block;
  text-align:center;
  width:120px;
}
section > nav > a{
  text-decoration:none;
  color:black;
}
section > nav:hover > a{
  text-decoration:none;
  color:red;
}

 

codepen.io/cjy324/pen/ZEOgVXE