时间戳

首页 > 解决方案 > 我有一个 CSS 垂直导航问题

html - 我有一个 CSS 垂直导航问题

问题描述

我一直在尝试为平板电脑和手机制作垂直导航。我给第二级 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="#">소독제&lt;/a></li>
                        </ul>
                    </li>
                    <li><a href="#">컬렉션&lt;/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="#">허벌리스트&lt;/a></li>
                            <li><a href="#">풋 리바이버</a></li>
                            <li><a href="#">인블룸&lt;/a></li>
                            <li><a href="#">크리스탈크러쉬&lt;/a></li>
                            <li><a href="#">배스타임&lt;/a></li>
                            <li><a href="#">선물세트/ 기프트세트&lt;/a></li>
                        </ul>
                    </li>
                    <li><a href="#">오일</a>
                        <ul class="depth2">
                            <li><a href="#">페이셜오일&lt;/a></li>
                            <li><a href="#">멀티오일&lt;/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;}

标签： htmlcssstaticnavigationposition

解决方案

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

也height:50px从header div.header_con nav .depth1 li第一级移除li总高度也应该允许嵌套的总高度ul

推荐阅读