계속 중앙 정렬로 한 개씩만 보이네요....
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main class="inline-block-center">
<nav role='navigation'>
<ul class="nav">
<li class="1">
<nav> <a href="#"> <div class="my_text">가나다</div></a>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcjZ3xH%2FbtrJC5XP11O%2FsClmod3esvBqkVhWKhSSkk%2Fimg.png">
</li>
<li class="2">
<nav> <a href="#"> <div class="my_text">라마바</div></a>
<img src="https://i.pinimg.com/736x/24/16/8f/24168fcc3e7913e9799cb9fc1251092c.jpg">
</li>
<li class="3">
<nav> <a href="#"> <div class="my_text">사아자</div></a>
<img src="https://i.pinimg.com/564x/8d/db/2c/8ddb2c79bd54d705d11868a3b1ba4564.jpg" >
</li>
<li class="4">
<nav> <a href="#"> <div class="my_text">차카타</div></a>
<img src="https://i.pinimg.com/564x/7b/4b/c0/7b4bc0a635ef7422b19e5b08d499cfd2.jpg">
</li>
</ul>
</div>
</nav>
</main>
<style>
body
.center {width 100px; margin: 20px; auto;}
.nav {width: 100%; margin: 20px 20px;
padding: 20px; text-align: center;}
.nav li {position: relative; font-size: 30px; margin: 50px; transition: all 2.s;}
.nav li:hover {color: #4d4d4d;}
.nav li:hover img {display: block;}
.nav li img {display: none; position: absolute; left: 55%; top: -70%; width: 100px; height: 100px;}
.my_img { display: none;}
.my_box:hover .my_img { display: block;}
.my_text { text-align : left;}
.inline-block-ceneter { text align: left; }
.inline-block-center div {
display: inline-block;
width: 100px;
text-align: left;
}
</style>
</body>
</html>
코드가 많이 지저분하지만 ㅜㅜ 초보라서 노력한 흔적이라고 생각해주세요... 감사합니다
