我有一个CSS垂直导航问题

问题描述

我一直在尝试对平板电脑和移动设备进行垂直导航。我将位置ul赋予了第二级ul，但它仍然像给定位置的绝对位置一样浮动。 .depth2 应该在 depth1> li 之间，但仍在浮动。透明的白框是.depth2。我该如何解决？

 <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>

PC导航CSS

    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;}

平板电脑的导航CSS

    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,0.4); }
    header div.header_con nav .depth2 li {padding: 0 0 0 20px;}

解决方法

在平板电脑CSS上将position:static的{{1}}更改为position:relative。静态和绝对都将内容从文档流中拉出，因此请谨慎使用。

还从header div.header_con nav .depth2中删除height:50px，因为第一级header div.header_con nav .depth1 li的总高度还应考虑嵌套li的总高度

html position static