如何解决我有一个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
的总高度
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。