stackoom
  简体   繁体   中英

Navigation bar odd behavior after giving it a fixed position in the css file

 原文  2017-06-08 07:50:10  8   2    html/ css

Question

I made a navigation bar with a dropdown and was working fine until i added the "position: fixed;" statement in the css file. Once I did that the dropdown either isn't coming up when the mouse hovers over the designated button or is coming up off screen. Note the parent button reacts to the mouse hover fine in terms of color changes, that's why i think the dropdown is coming up off screen.

EDIT: i realized that the dropdown appears in the ul element and i can scroll within it to view the list. It's not appearing as an actual dropdown over the content on the page but within the navbar itself.

Here's my code: 

 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 answers

solution1
 1 ACCPTED  2017-06-08 07:58:19

Update css and remove the overflow to properties ul.navbar from your css and add position:relative and remove width:21%; to below html 

<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">

css part 

.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 */
}

working fiddle

fiddle 

 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>

solution2
 0  2017-06-08 08:04:42

Remove overflow from .navbar 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question css navigation bar position fixed not working Fixed navigation bar would not work even using position: fixed in css Fixed position navigation bar Fixed CSS Navigation Bar Fixed navigation bar css CSS help: Navigation bar position: fixed; I also need to center navigation “position fixed” is not giving the expected result in html Navigation bar fixed after scroll? Fixed navigation bar after scrolling How to get position:fixed; behavior with scroll bar
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM