最近在實作一個導航的功能，一級選單，二級選單，選擇二級選單時，對應的子選單出現的功能實作了。但是如何讓子選單（紅框框標的）始終顯示在靠近頂部的位置（紅線位置）。而不是跟著移動。如果有人會的話，請幫忙解答一下，謝謝了。
現在的效果是這樣的：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
a{
color: blue;
text-decoration: none;
}
.box{
width:100%;
margin: 0 auto;
/*background-color: grey;*/
}
.nav{
width:1200px;
height: 100px;
/*background: greenyellow;*/
margin: 0 auto;
}
.wrap,.subnav,.z_nav{
list-style: none;
}
.wrap>li{
float: left;
margin-left: 2px;
height: 30px;
width: 100px;
text-align: center;
height: ;
background-color: grey;
}
.all{
display: inline-block;
height: 30px;
}
.subnav{
}
.subnav>li{
position: relative;
text-align: left;
background-color: gainsboro;
}
.subnav>li .z_nav{
width: 400px;
position: absolute;
left:100px;
top:0px;
background-color: yellowgreen;
display: none;
}
.subnav>li:hover>.z_nav{
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<ul class="wrap">
<li>
<a class="all" href="https://bbs.csdn.net/topics/#">所有商品分類</a>
<ul class="subnav">
<li>
<a href="https://bbs.csdn.net/topics/#">鎮店之寶</a>
<ul class="z_nav">
<li><a href="https://bbs.csdn.net/topics/#">本來推薦</a></li>
<li><a href="https://bbs.csdn.net/topics/#">有機食材</a></li>
<li><a href="https://bbs.csdn.net/topics/#">料理之味</a></li>
</ul>
</li>
<li>
<a href="https://bbs.csdn.net/topics/#">水果</a>
<ul class="z_nav">
<li><a href="">熱門推薦</a></li>
<li><a href="">精選水果</a></li>
<li><a href="">禮盒/組盒</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">蔬菜</a></li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">首頁</a></li>
<li><a href="https://bbs.csdn.net/topics/#">臺創園</a></li>
</ul>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
試一下，postition:fixed
uj5u.com熱心網友回復：
我來試試，感謝！uj5u.com熱心網友回復：
把 relative 定位改到ul上
.subnav {
position: relative;
}
.subnav>li {
text-align: left;
background-color: gainsboro;
}
uj5u.com熱心網友回復：
https://blog.csdn.net/qq_22154647/article/details/103837342uj5u.com熱心網友回復：
定位，位置寫死即可轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/96880.html
標籤：HTML(CSS)
上一篇：多類名選擇器和css基本樣式
下一篇：position 居中問題