Question

这是我第一次尝试从头开始建立一个网站，所以如果我做错了，我会道歉;不过，我愿意接受任何建议。我现在的主要问题是导航栏在其自身内滚动而不是在背景图像前面向下滚动。在我添加浮动/固定属性之前，它看起来很完美。

这不是什么大不了的事，但如果下拉框居中而不是与框的左侧对齐也会很好。这就是我想要的样子：http://www.palousebicycle.org/这里是我现在拥有的代码：

<header>
<style>

#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
        }

li {
text-align: center;
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: #333;

                                     }
li.dropdown {
display: inline-block;
            }

.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                  }

.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
                    }

.dropdown-content a:hover {
background-color: #333
                          }

.dropdown:hover .dropdown-content {
display: block;                                              
                                  }

a:link {
color: white;
       }

a:visited {
color: white;
          }

a:hover {
color: gray;
        }

a:active {
color: whitesmoke;
         }                                           

</style>

    <font face="Ubuntu" color="white">

    <nav align="center">
        <ul id="nav">
            <li><a href="#home">Home</a></li>
            <li class="dropdown">
            <a href="#services" class="dropbtn">Services</a>
                <div class="dropdown-content">
                <a href="#">Memberships</a>
                <a href="#">Repairs</a>
            </div>   
            <li><a href="#our work">Our Work</a></li>    
            <li class="dropdown">
            <a href="#about us" class="dropbtn">About Us</a>
                <div class="dropdown-content">
                <a href="#our team">Our Team</a>
                <a href="#board of directors">Board of Directors</a>
                </div>  
            <li><a href="#contact">Contact</a></li>
            <li><a href="#donate">Donate</a></li>      
    </ul>
    </nav>

</header>

我非常感谢你的时间！感谢您的任何回复或建议。

Answer 1

编辑：还更新了此演示，以便根据您的示例对下拉菜单（位置和文本）进行居中，并在CSS中进行注释，以便您可以查看更改的位置。

删除overflow: auto上的#nav，让下拉列表延伸到导航栏之外。现场演示：

＆＃13;

#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  font-family: Ubuntu;
  font-size: .75em;
  display: block;
}
li {
  text-align: center;
  display: inline-block;
  /* center dropdowns */
  position: relative;
}
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: #333;
}
li.dropdown {
  display: inline-block;
}
li.dropdown:hover .dropdown-content {
  /* show dropdown */
  display: block;
}
.dropdown-content {
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* center dropdowns */
  left: 50%;
  transform: translateX(-50%);
  /* hide dropdown */
  display: none;
}
.dropdown-content a {
  color: #222;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  /* center dropdowns */
  text-align: center;
}
.dropdown-content a:hover {
  background-color: #333
}
.dropdown:hover .dropdown-content {
  display: block;
}
a:link {
  color: white;
}
a:visited {
  color: white;
}
a:hover {
  color: gray;
}
a:active {
  color: whitesmoke;
}

＆＃13;

<nav align="center">
  <ul id="nav">
    <li><a href="#home">Home</a>
    </li>
    <li class="dropdown"> <a href="#services" class="dropbtn">Services</a> 
      <div class="dropdown-content"> <a href="#">Memberships</a>  <a href="#">Repairs</a> 
      </div>
      <li><a href="#our work">Our Work</a>
      </li>
      <li class="dropdown"> <a href="#about us" class="dropbtn">About Us</a> 
        <div class="dropdown-content"> <a href="#our team">Our Team</a>  <a href="#board of directors">Board of Directors</a> 
        </div>
        <li><a href="#contact">Contact</a>
        </li>
        <li><a href="#donate">Donate</a>
        </li>
  </ul>
</nav>

＆＃13;

Answer 2

不要在overflow: auto上使用#nav属性。这负责内部滚动。而是提供这些额外的样式：

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  top: 40px;
}

.dropdown:hover > .dropdown-content {
  display: block;
}

查看下面的工作代码段：

＆＃13;

#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  font-family: Ubuntu;
  font-size: .75em;
  display: block;
}

li {
  text-align: center;
  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: #333;

}
li.dropdown {
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: #222;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #333
}

.dropdown:hover .dropdown-content {
  display: block;                                              
}

a:link {
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: gray;
}

a:active {
  color: whitesmoke;
}          

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.dropdown-content a {
  text-align: center;
}

.dropdown:hover > .dropdown-content {
  display: block;
}

body {
  margin: 0;
}

＆＃13;

<header>
  <font face="Ubuntu" color="white">

  <nav align="center">
    <ul id="nav">
      <li><a href="#home">Home</a></li>
      <li class="dropdown">
        <a href="#services" class="dropbtn">Services</a>
        <div class="dropdown-content">
          <a href="#">Memberships</a>
          <a href="#">Repairs</a>
        </div>
      </li>
      <li><a href="#our work">Our Work</a></li>    
      <li class="dropdown">
        <a href="#about us" class="dropbtn">About Us</a>
        <div class="dropdown-content">
          <a href="#our team">Our Team</a>
          <a href="#board of directors">Board of Directors</a>
        </div> 
      </li> 
      <li><a href="#contact">Contact</a></li>
      <li><a href="#donate">Donate</a></li>      
    </ul>
  </nav>

</header>

＆＃13;

希望这有帮助！

下拉菜单滚动问题

2 个答案: