0
我最近在開發我的網頁設計，我儘量使用CSS，因爲我沒有javascript。當我使我的導航菜單應該保持在最前面時，問題就出現了。這裏是我的代碼的副本：如何使頂部菜單停留，而不會丟失菜單的部分
ul {
\t background: rgba(37,39,44,.80);
\t list-style-type:none;
\t margin : 0;
\t padding: 0;
\t overflow:visible;
\t font-family:Kreon;
\t min-width:1349px;
\t width:100%;
\t top:0;
\t position:fixed;
\t border-bottom: 5px solid #22A85B;
\t
}
li {
\t float : right;
}
li a{
\t display:block;
\t color : white;
\t text-align:center;
\t padding: 15px 20px 15px 20px;
\t text-decoration :none;
\t border-right:0.5px solid #22a85b;
\t transition: 0.3s all;
}
li a:hover {
\t background:#22a85b;
}
.dropdown-arrow {
\t position:relative;
\t top:1px;
\t display:inline-block;
\t width:0;
\t height:0;
\t margin-left:5px;
\t border: 4px solid transparent;
\t border-top-color:#fff;
}
.dropdown {
\t float:right;
\t position:relative;
\t display:inline-block;
\t color: white;
\t text-align:center;
\t padding: 15px 20px 15px 20px;
\t cursor:pointer;
\t border-right:1px solid #22A85B;
}
.dropdown:hover{
\t background:#22a85b;
}
.dropdown:focus {
\t pointer-events:none;
\t background:#eee;
\t color:#000;
}
.dropdown-content {
\t position:absolute;
\t background-color:#eee;
\t min-width:150px;
\t z-index:1;
\t opacity:0;
\t visibility:hidden;
\t transition: 0.2s linear;
\t margin-top:36px;
\t margin-left:-50px;
\t border : 1px solid #bbb;
\t border-top:none;
}
.dropdown-content a{
\t text-align:right;
\t color: black;
\t font-family:kreon;
\t text-decoration:none;
\t padding: 10px 15px 10px 15px;
\t display:block;
\t transition: 0.1s linear;
\t border-bottom: 1px solid #20D23F;
}
.dropdown-content a:hover{
\t background: #22a85b;
\t color:#fff;
}
.dropdown:focus .dropdown-content{
\t opacity:1;
\t visibility:visible;
\t pointer-events:auto;
}
.dropdown:focus .dropdown-arrow{
\t border: 4px solid transparent;
\t border-bottom-color:#000;
\t margin-bottom : 4px;
}<ul>
<li style ="float:left; margin-left:150px; border-left:1px solid #22A85B;"><a href="#">Logo Here</a></li>
<li style="margin-right:60px;"><a href="#">About Us</a></li>
<li><a href="#">Hire Us!</a></li>
<div tabindex="0" class="dropdown">
<li class="fol">Follow Us <span class="dropdown-arrow"></span></li>
\t <div class="dropdown-content">
\t <a href="http://twitter.com">Twitter</a>
\t <a href="http://fb.com">Facebook</a>
\t <a href="http://pinterest.com" style="border-bottom:none; border-bottom-radius:0.3cm;">Pinterest</a>
\t </div>
</div>
<li><a href="#">Be Our Designer!</a></li>
<li><a href="#">Portfolio</a></li>
<li style="border-left:1px solid #22A85B;"><a href="#">How Do We Work</a></li>
</ul>因此，爲了使在頂部的菜單逗留期間，我把position : fixed;我的CSS。但是，當我調整瀏覽器的大小時，浮動菜單移動到某個菜單的底部。然後，我試圖設置min-width，以發現當我調整瀏覽器的大小（即使向左滾動時無法看到它），我的一些菜單丟失，因爲position : fixed。
任何幫助你們，將不勝感激。謝謝！