I have been attempting to create a vertical navigation menu for tablet and mobile devices. Despite setting the position of the second-level .depth2 ul element to static, it still seems to be floating around as if it were positioned absolutely within the parent elements. The translucent white boxes represent the .depth2 elements. How can I resolve this issue?
https://i.sstatic.net/yDulM.png
<div class="header_con">
<span><a href="#"></a></span>
<p><a href="#"><img src="images/logo.png" alt="logo"></a></p>
<nav>
<ul class="depth1">
<li><a href="#">코로나-19</a>
<ul class="depth2">
<li><a href="#">손세정제</a></li>
<li><a href="#">소독제</a></li>
</ul>
</li>
<li><a href="#">컬렉션</a>
<ul class="depth2">
<li><a href="#"><small>new</small>클레멘타인 앤 바질</a></li>
<li><a href="#"><small>new</small>베티버 앤 바이올렛</a></li>
<li><a href="#">아로마테라피 시너지</a></li>
<li><a href="#">허벌리스트</a></li>
<li><a href="#">풋 리바이버</a></li>
<li><a href="#">인블룸</a></li>
<li><a href="#">크리스탈크러쉬</a></li>
<li><a href="#">배스타임</a></li>
<li><a href="#">선물세트/ 기프트세트</a></li>
</ul>
</li>
<li><a href="#">오일</a>
<ul class="depth2">
<li><a href="#">페이셜오일</a></li>
<li><a href="#">멀티오일</a></li>
</ul>
</li>
.
.
.
</ul>
</nav>
</div>
</header>
navigation CSS for pc
header nav { width: 750px; position: absolute; left: 50%; margin-left: -360px;}
header ul.depth1>li{float: left; width: 70px; margin: 0 0.2%; font-size: 0.9em;
font-weight: bold; text-align: center;}
header ul.depth2{display: none; position: absolute; z-index: 100; width: 200px; margin-top: 20px;
background: #fff; text-align: left; padding: 20px; font-weight: normal; font-size: 0.8em;}
header ul.depth2>li {margin-bottom: 12px;}
navigation CSS for tablet
header div.header_con nav {/* display: none;*/ position: fixed; top: 0; right: 0; bottom: 0;
left: 0; width: 100%; height: 100%; background: #0b223b; z-index: 110; margin-left: 0;}
header div.header_con nav a{ color: white;}
header div.header_con nav .depth1{display: block; color: white; height: 100%;}
header div.header_con nav .depth1 li {float: none ;width: 100%; height: 50px; line-height: 50px;
border-bottom: 1px solid #999; }
header div.header_con nav .depth2 {display: block; position: static; width: 100%; height: auto;
margin-top: 0; padding: 0; background: rgba(255,255,255,0.4); }
header div.header_con nav .depth2 li {padding: 0 0 0 20px;}