글씨 겹쳐짐
본문
position absolute 를 주고 top 0px을 주면 그 안에 있던 글씨 들이 겹칩니다.
css
@charset "utf-8";
*{
padding: 0;
margin: 0 auto;
color: #333333;
list-style: none;
}
a{text-decoration: none; display: block;}
body{
width: 5000px;
height: 2800px;
}
.menu{
position: relative;
float: left;
width: 200px;
height: 2800px;
background-color:#00b6c2;
}
.navi{
margin-left: 15px;
font-size: 40px;
}
.navi img{
width: 170px;
height: 130px;
}
.submenu li{
float: left;
width: 300px;
margin-top: 40px;
margin-bottom: 300px;
}
.submenu{
display: none;
z-index: 100;
position: absolute;
left: 200px;
top: 0px;
}
.submenu_bg{
z-index: 90;
display: none;
width: 400px;
height: 2800px;
z-index: 100;
position: absolute;
left: 200px;
background-color: #00b6c2;
}
.top{
margin-top: 50px;
margin-bottom: 50px;
}
.bottom{
margin-top: 150px;
html
<body>
<div class="menu">
<div class="submenu_bg"></div>
<ul class="navi">
<li class="top"><a href="#"><img src="images/MENU 1.png" alt="menu"></a>
</li>
<li><a href="#"><img src="images/MENU 2.png" alt="menu"></a>
<ul class="submenu">
<li class="t"><a href="#">홈</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 3.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">메일</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 4.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">주소록</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 5.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">자료실</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 6.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">캘린더</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 7.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">문서관리</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 8.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">게시판</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 9.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">커뮤니티</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 10.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">예약</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 11.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">설문</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 12.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">보고</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 13.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">Works</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 14.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">ToDD+</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 15.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">전자결재</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 16.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">전사 문서함</a></li>
</ul>
</li>
<li><a href="#"><img src="images/MENU 17.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">근태 관리</a></li>
</ul>
</li>
<li class="bottom"><a href="#"><img src="images/MENU 18.png" alt="menu"></a>
<ul class="submenu">
<li><a href="#">조직도</a></li>
</ul>
</li>
</ul>
</div>
답변 2
li에 position:relative를 주면 내부 absolute는 li내부에서 0,0의 위치에 표시됩니다.
.navi li{
position:relative;
}
를 추가해 보십시요.
감사합니다.
absolute 인 상태이니 당연히 겹칠수밖에요..
상위 객에에 relative 속성을 넣으세요.
감사합니다.