我想将导航栏保持在顶部。当我使用
position: fixed在标签上，它使我的导航栏保持在顶部，但是，它停止了我的下拉菜单工作!
body {
margin: 0;
}
h1 {
color: navy;
font-family: 'Nunito',sans-serif;
}
/*** NAVIGATION BAR ***/
ul {
list-style-type: none; /*Removes bulet points*/
margin: 0; /*Removes browser default - sets to far left of page*/
padding: 0; /*Removes browser default - sets to far left of page*/
width: 100%; /*Width of the nav bar buttons*/
background-color: black; /*Background colour of nav bar buttons #dddddd was #333 */
overflow: hidden;
top: 0;
font-family: nunito;
opacity: 0.8;
position: fixed;
}
/*Sets a button to a colour
.active{
background-color: #4CAF50;
}*/
li {
float: left;
}
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: red; /*Changes colour of active nav bar*/
}
li.dropdown {
display: inline-block;
}
/*Drop Down Box*/
.dropdown-content { /*This is the drop down box*/
display: none;
position: absolute;
opacity: 1;
background-color: #333; /*Changes colour of drop down box (non-active)*/
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #9B9B9B; /* Changes colour of text in drop down*/
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/*Active Drop Down Box*/
.dropdown-content a:hover {
background-color: #444; /*Changes colour of active drop-down box*/
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*** NAVIGATION BAR DONE ***/
.main { /*main class*/
margin-top: 50px;
}<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="Stylesheets/styles.css">
<link href="https://fonts.googleapis.com/css?family=Aleo|Indie+Flower|Nunito|Roboto" rel="stylesheet">
</head>
<body>
<!-- Nav Bar -->
<nav>
<ul>
<!-- Home -->
<li><a class="active" href="#home">Home</a></li>
<!-- News -->
<li class="dropdown">
<a href="#news" class="dropbtn">News</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<!-- Contact -->
<li><a href="#contact">Contact</a></li>
<!-- About -->
<li style="float:right"><a href="#about">About</a></li>
</ul>
</nav>
<!-- Main -->
<div class="main">
<h1>TEST 4</h1><p>TEST 2</p>
</div>
</body>
</html>请帮我解决 - 我需要将固定位置移动到哪里，以便我的导航栏保持在顶部，但我的下拉菜单仍然有效？
....不得不添加额外的评论，因为它不会让我在没有“额外细节”的情况下发帖......
谢谢
最佳答案
只需从 ul 选择器中删除 overflow:hidden
body {
margin: 0;
}
h1 {
color: navy;
font-family: 'Nunito',sans-serif;
}
/*** NAVIGATION BAR ***/
ul {
list-style-type: none; /*Removes bulet points*/
margin: 0; /*Removes browser default - sets to far left of page*/
padding: 0; /*Removes browser default - sets to far left of page*/
width: 100%; /*Width of the nav bar buttons*/
background-color: black; /*Background colour of nav bar buttons #dddddd was #333 */
/* overflow: hidden; */
top: 0;
font-family: nunito;
opacity: 0.8;
position: fixed;
}
/*Sets a button to a colour
.active{
background-color: #4CAF50;
}*/
li {
float: left;
}
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: red; /*Changes colour of active nav bar*/
}
li.dropdown {
display: inline-block;
}
/*Drop Down Box*/
.dropdown-content { /*This is the drop down box*/
display: none;
position: absolute;
opacity: 1;
background-color: #333; /*Changes colour of drop down box (non-active)*/
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #9B9B9B; /* Changes colour of text in drop down*/
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/*Active Drop Down Box*/
.dropdown-content a:hover {
background-color: #444; /*Changes colour of active drop-down box*/
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*** NAVIGATION BAR DONE ***/
.main { /*main class*/
margin-top: 50px;
}<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="Stylesheets/styles.css">
<link href="https://fonts.googleapis.com/css?family=Aleo|Indie+Flower|Nunito|Roboto" rel="stylesheet">
</head>
<body>
<!-- Nav Bar -->
<nav>
<ul>
<!-- Home -->
<li><a class="active" href="#home">Home</a></li>
<!-- News -->
<li class="dropdown">
<a href="#news" class="dropbtn">News</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<!-- Contact -->
<li><a href="#contact">Contact</a></li>
<!-- About -->
<li style="float:right"><a href="#about">About</a></li>
</ul>
</nav>
<!-- Main -->
<div class="main">
<h1>TEST 4</h1><p>TEST 2</p>
</div>
</body>
</html>关于html - 如何让下拉菜单工作并将导航栏保持在顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54773073/