導航欄在css文件中固定位置后的異常行為
[英]Navigation bar odd behavior after giving it a fixed position in the css file
問題描述
我制作了一個帶有下拉菜單的導航欄，並且在添加“ position：fixed;”之前一直工作良好。 css文件中的語句。 一旦我做到了，當鼠標懸停在指定按鈕上時，下拉菜單將不會顯示，或者會彈出屏幕。 請注意，父按鈕在顏色變化方面對鼠標懸停做出了很好的反應，這就是為什么我認為下拉列表即將出現在屏幕之外的原因。
編輯：我意識到下拉列表出現在ul元素中，並且我可以在其中滾動查看列表。 它不會顯示為頁面內容上的實際下拉列表，而是顯示在導航欄本身內。
這是我的代碼：
ul.navbar { overflow-x: hidden; list-style-type: none; margin: 0; padding: 0; background-color: #ffb90f; width: 100%; display: block; vertical-align: middle; height: 48px; position: fixed; top: 0; } .navbar li { display: inline-block; overflow: hidden; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, dropdown:hover .dropbtn { background-color: #FFC63D; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #FFF3D5; min-width: 160px; box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2); z-index: 1; margin-left: 8.7%; } .dropdown-content a { color: #FFBE1E; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ffb90f; color: white; } .dropdown:hover .dropdown-content { display: block; }
<body> <ul class="navbar"> <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li> <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li> <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right"> <a href="javascript:void(0)" class="dropbtn">Jump to...</a> <div class="dropdown-content"> <a href="#">Item1</a> <a href="#">Item2</a> </div> </li> </ul> </body>
2 個解決方案
解決方案1
1 已采納 2017-06-08 07:58:19
更新css並從css中刪除對屬性ul.navbar的overflow ，並添加position:relative並刪除width:21%; 到下面的html
<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">
CSS部分
.dropdown-content {
display: none;
position: absolute;
background-color: #FFF3D5;
min-width: 160px;
box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-left: 8.7%;
left:0px; /* Add this you can change it as your need */
}
工作小提琴
ul.navbar { list-style-type: none; margin: 0; padding: 0; background-color: #ffb90f; width: 100%; display: block; vertical-align: middle; height: auto; position: fixed; top: 0; } .navbar li { display: inline-block; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, dropdown:hover .dropbtn { background-color: #FFC63D; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #FFF3D5; min-width: 160px; box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2); z-index: 1; margin-left: 8.7%; left:0px; } .dropdown-content a { color: #FFBE1E; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ffb90f; color: white; } .dropdown:hover .dropdown-content { display: block; }
<ul class="navbar"> <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li> <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li> <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;"> <a href="javascript:void(0)" class="dropbtn">Jump to...</a> <div class="dropdown-content"> <a href="#">Item1</a> <a href="#">Item2</a> </div> </li> </ul>
解決方案2
0 2017-06-08 08:04:42
清除.navbar overflow
ul.navbar { list-style-type: none; margin: 0; padding: 0; background-color: #ffb90f; width: 100%; display: block; vertical-align: middle; height: 48px; position: fixed; top: 0; } .navbar li { display: inline-block; overflow: hidden; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, dropdown:hover .dropbtn { background-color: #FFC63D; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #FFF3D5; min-width: 160px; box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2); z-index: 1; margin-left: 8.7%; } .dropdown-content a { color: #FFBE1E; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ffb90f; color: white; } .dropdown:hover .dropdown-content { display: block; }
<body> <ul class="navbar"> <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li> <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li> <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right"> <a href="javascript:void(0)" class="dropbtn">Jump to...</a> <div class="dropdown-content"> <a href="#">Item1</a> <a href="#">Item2</a> </div> </li> </ul> </body>
固定導航欄即使使用 position 也不起作用：固定在 css
[英]Fixed navigation bar would not work even using position: fixed in css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.