我想将我的导航栏保持在顶部。当我使用
时
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>
请帮助我修复 - 我需要在哪里移动固定的位置,以使我的NAV栏保持在顶部,但是我的下拉栏仍然可以工作?
....不得不添加额外的评论,因为它不会让我发帖而没有"额外的细节" .....
谢谢
只需从 ul
selector删除 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>