修复导航栏下拉错误定位并且只在一个页面上工作答案

【问题标题】：fix navbar dropdown bad positioning and only working on one page修复导航栏下拉错误定位并且只在一个页面上工作
【发布时间】：2020-01-23 19:38:55
【问题描述】：

所以我一直在制作一个网站供我和我的朋友在学校使用，因为他们阻止了一切，所以我制作了自己的聊天系统等。我正在寻找一些帮助来修复我的导航栏下拉列表，目前没有'根本不起作用，但 php 中有标签，因为有人可以请看看是否有一个很棒的修复程序！希望这篇文章的答案对寻找相同功能的其他人有用！

header.php

@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Montserrat";

/* ===========================================
                    Titles
============================================ */
.title, div.title, .title-left {
  text-transform: uppercase;
  padding: 40px 0 0 0;
  color: #6C6C6C;
  margin: 0; }

div.title, div.title-left {
  padding: 20px 0; }

.title-left {
  text-align: left; }


/* ===========================================
                Buttons
============================================ */
.button, .button-primary {
  border-radius: 100px;
  font-weight: normal;
  padding: 15px 30px;
  border: 0; }

.button-primary {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  -webkit-transition: 700ms background ease-in-out;
  transition: 700ms background ease-in-out;
  background: #1DB2E3;
  color: #FFFFFF; }
  .button-primary:hover {
    background: #333E4F; }

/* ===========================================
            Main Navigation
============================================ */
#main-navigation {
  background: rgba(0, 0, 0, 0.25);
  min-height: 90px;
  z-index: 999; 
  }
  #main-navigation .navigation-left {
    padding: 37px 0;
    float: left; }
    #main-navigation .navigation-left a.logo {
      text-transform: uppercase;
      font-size: 30px;
      color: #FFFFFF; }
      #main-navigation .navigation-left a.logo img {
        margin-top: 0px;
        height: 60px; }
  #main-navigation .hamburger-menu {
    height: 20px;
    position: absolute;
    width: 30px;
    margin: auto;
    right: -70%;
    bottom: 0;
    left: 0;
    top: 0; }
  #main-navigation .bar,
  #main-navigation .bar:after,
  #main-navigation .bar:before {
    height: 2px;
    width: 30px; }
  #main-navigation .bar {
    -webkit-transform: translateY(9px);
    transform: translateY(9px);
    background: white;
    -webkit-transition: all 0ms 300ms;
    transition: all 0ms 300ms;
    position: relative; }
    #main-navigation .bar.animate {
      background: rgba(255, 255, 255, 0); }
  #main-navigation .bar:before {
    -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    background: white;
    bottom: 9px;
    position: absolute;
    content: "";
    left: 0; }
  #main-navigation .bar:after {
    -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    background: white;
    position: absolute;
    top: 9px;
    content: "";
    left: 0; }
  #main-navigation .bar.animate:before {
    -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 0; }
  #main-navigation .bar.animate:after {
    -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0; }
  #main-navigation .navigation-right {
    padding: 37px 0;
    display: none;
    float: right; }
    #main-navigation .navigation-right .item {
      font-weight: normal;
      margin-right: 15px;
      color: #FFFFFF; }
  @media (min-width: 480px) {
    #main-navigation .navigation-right {
      display: block; }
    #main-navigation .hamburger-menu {
      display: none; } }

.navigation-right.active {
  display: block !important;
  background: transparent;
  position: absolute;
  margin-top: 95px;
  height: 352px;
  z-index: 999;
  width: 100%;
  left: 0;
  top: 0; }
  .navigation-right.active a {
    text-align: center;
    padding: 16px 0;
    display: block; }
  .navigation-right.active .button-primary {
    margin: 0 auto;
    width: 70%; }

.dropdown {
  display: none;
  margin-right: 60px;}

.dropdown.active {
  background: rgba(0, 0, 0, 0.25);
  display: block !important; }
  .dropdown.active a {
    border-bottom: 1px dashed #AAAAAA;
    padding: 10px 0;
    display: block;
    color: #FFFFFF; }
    .dropdown.active a:last-child {
      border: 0; }
  @media (min-width: 480px) {
    .dropdown.active {
      position: absolute;
      padding: 15px 20px;
      margin-top: 34px;
      margin-left: 16em;
      } }

/* OTHER */

body {
  background-color: #3d3d3d;
}


html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
}  
  
a {
  text-decoration: none;
}

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>MopedBoyz</title>
        <link rel="icon" href="img/mopedIcon.ico">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>

            <div id="main-navigation" class="animated bounceInDown">
            <div class="inner">
                <div class="navigation-left">
                    <a href="index.php" class="logo bold">MopedBoyz</a>
                </div>

                <div class="hamburger-menu">
                    <div class="bar"></div>
                </div>

                <div class="navigation-right">
                    <a href="index.php" class="item">Links</a>
                    <a href="chat.php" class="item">Chat</a>
                    <a href="login.php" class="item">Login</a>
                    <a href="register.php" class="item">Register</a>
                    <a href="usercp.php" class="item">Settings</a>
                    <a href="#" class="item hosting-dropdown">Account
                     <i class="fa fa-caret-down"></i></a>
                        <li class="dropdown">
                            <a href="login.php">Login</a>
                            <a href="register.php">Register</a>
                            <a href="usercp.php">Settings</a>
                            <a href="sys/logout.php">Logout</a>
                        </li>
                    <a href="sys/logout.php" class="button-primary">Logout</a>
                </div>
            </div>
        </div>

【问题讨论】：

在问题中包含您的 CSS 文件，没有人会阅读 3000 行，但如果您能提供 minimal reproducible example，那就太好了！
问题是，由于它是 3000 行，所以很难产生一个“最小的可重现示例”，我可以尽我最大的努力不能保证它会完全工作，我唯一能建议的是创建一个快速 index.php 使用我提供的 header.php 添加标题标签，然后将所有 css 复制到 php 文件中，然后使用 ctrl+f 浏览 css 并找到下拉列表和导航区域并尝试在那里诊断它，我试过这样做，因为我自己没有受过教育，我无法修复它。
嘿 @MrWilliamJM 您只能复制 HTML 中使用的必要代码。这通常是id 和class 标签。因此检查 main-navigation animated bounceInDown inner, etc. 的 css。这将使人们更容易回答您的问题。
@s1x 在那里，添加了导航栏所需 css 的“基本”概要

标签： php jquery html css

【解决方案1】：

如果阅读您的 3000 行 css 代码非常困难，但我为您做了一个工作示例。你可以在jsFiddle找到它。

我认为您应该按如下方式构建“下拉”容器：

 <ul class="dropdown">
    <li><a href="login.php">Login</a></li>
    <li><a href="register.php">Register</a></li>
    <li><a href="usercp.php">Settings</a></li>
    <li><a href="sys/logout.php">Logout</a></li>
 </ul>

'li'标签应该放在上面的'ul'里面。

整个“下拉菜单”容器应放置在“主机下拉菜单”中，该“下拉菜单”打开和关闭“下拉菜单”。因此，您可以调整“下拉”容器相对于“托管下拉”按钮的位置。

 <div id="dropdown" class="item hosting-dropdown">
      <span>Account<i class="fa fa-caret-down"></i></span>
      <ul class="dropdown">
          <li><a href="login.php">Login</a></li>
          <li><a href="register.php">Register</a></li>
          <li><a href="usercp.php">Settings</a></li>
          <li><a href="sys/logout.php">Logout</a></li>
     </ul>
 </div>

下拉打开和关闭可以用一个jQuery小函数来实现：

$('document').ready(function() {
    $('#dropdown').click(function() {
    $(this).toggleClass('opened');
  })
})

还有 CSS：

.hosting-dropdown { 
  display: inline-block;
  margin-left: 10px;
  position: relative;
  cursor: pointer;
}  

.dropdown {
  position: absolute;
  right: 0;
  top: 55px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 15px;
  margin: 0;
  display: none; 
}

.hosting-dropdown.opened .dropdown {
  display: block;
}

.dropdown li {
  list-style: none;
  padding: 5px 0;
}

.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  float: left;
}

.content {
  height: 2000px;
  width: 100%;
  background-color:#fff
}

#main-navigation .navigation-left {
  padding: 27px 0;   
}
#main-navigation .navigation-right{
  padding: 35px 0; 
}

如果您有任何问题，请与我联系。

【讨论】：

仍在努力让它在我的网站上运行，在 jsfiddle 上看起来很棒，但将它添加到 header.php 并将其集成到主站点是问题。