我有一个 css 垂直导航问题

Question

我一直在尝试为平板电脑和手机制作垂直导航。我给二级 ul 那个位置是静态的，但它仍然像给定的绝对位置一样浮动。 .depth2 应该在 depth1>lis 之间，但它仍然在周围浮动。透明的白框是.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>

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

Answer 1

在 header div.header_con nav .depth2 的平板电脑 css 上将 position:static 更改为 position:relative。静态和绝对都将内容从文档流中提取出来，因此请谨慎使用。

同时从 header div.header_con nav .depth1 li 中删除 height:50px 作为第一层 li 总高度还应考虑到嵌套 ul

的总高度

我有一个 css 垂直导航问题

I have a css vertical navigation issue

html

css

navigation

static

position