时间戳

首页 > 解决方案 > 如何让下拉菜单工作并将导航栏保持在顶部？

html - 如何让下拉菜单工作并将导航栏保持在顶部？

问题描述

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

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>

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

....不得不添加额外的评论，因为它不会让我在没有“额外细节”的情况下发布.....

谢谢

标签： htmlcss

解决方案

只需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>

推荐阅读