Question

我想将导航栏保持在顶部。当我使用

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>

请帮助我修复-我需要将固定位置移动到什么位置，以使导航栏保持在顶部，但下拉菜单仍然有效？

....必须添加额外的注释，因为它不会让我发帖时没有“额外的细节” .....

谢谢

Answer 1

只需从overflow:hidden选择器中删除ul

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>

如何使下拉菜单工作并使导航栏保持在顶部？

1 个答案: