CSS Head Nav 和下拉菜单对齐问题

如何解决CSS Head Nav 和下拉菜单对齐问题

我正在为学校开展一个项目，并尝试在我的头部导航中添加一个下拉菜单。我对 css 还是很陌生，但是在使用样式以获得有趣的对齐方式方面玩得很开心，这将与我对页面的愿景一起工作（这是一个更大的部分的一部分，我没有包括它以保持它与问题）

我想创建一个右对齐的菜单，该菜单设置在头部 div 的底部。我通过使用绝对定位让一切正常工作，但现在我正在尝试添加一个花哨的多级下拉菜单，但它不起作用。我尝试了内联块以及相对和绝对定位的组合，但下拉列表没有正确对齐。它只是在向右偏移的底部聚集在一起。

当我像人们在教程中所做的那样尝试设置导航栏样式时，当我删除绝对定位时，它会变得一团糟。

有没有办法让下拉菜单与当前的样式方法一起使用？我还没有任何悬停效果或可见性，因为我什至无法将其对齐！对于下拉菜单和子菜单，这部分应该非常简单。

也许更重要
有没有更好的方法来实现这个视觉目标？ （在白色div底部右对齐）

这还不是动态样式，因此您必须拉伸视口才能使其有意义。

/*====================================MAIN=================================*/

body {
  background-color: #d5d3d5;
  font-family: 'Gill Sans','Gill Sans MT','Calibri','Trebuchet MS',sans-serif;
  margin: 0px;
  padding: 0px;
}

.flex_body {
  background: linear-gradient(90deg,rgba(255,255,.0),1) 20%);
  display: flex;
  margin: 0px;
  padding: 0px;
  height: 800px;
}

.page_body {
  background: linear-gradient(90deg,1) 15%);
  margin: 0px 0px 0px 30px;
  padding: 0px 0px 0px 20px;
  height: 800px;
  overflow: hidden;
}


/*=============================MAIN=NAVIGATION=================================*/

#header {
  background-color: #ffffff;
  height: 130px;
  margin: 0px;
  padding-bottom: 0px;
  position: relative;
  Box-shadow: inset 0px -15px 18px -6px rgba(121,104,124,0.678);
}

#headNAV ul {
  list-style-type: none;
  position: absolute;
  text-align: right;
  bottom: 0;
  right: 0;
  margin: 8px;
}

#headNAV ul li {
  display: inline;
  position: relative;
  font-size: 18px;
  padding: 5px 0px 15px 0px;
  margin: 0px 0px 0px -5px;
}

#headNAV ul li:not(:last-child) {
  border-right: 1px solid #8f85a1dc;
}

#headNAV ul li a {
  display: inline-block;
  padding: 5px 40px 10px 40px;
  margin: 0px 0px -2px 0px;
  text-decoration: none;
  color: #353138;
}

#headNAV ul li a:hover {
  background-color: #50328ddc;
  color: white;
  text-decoration: underline;
  Box-shadow: 0px 5px 3px 1px #50328ddc;
}

#search_icon {
  max-width: 5%;
  max-height: 5%;
  margin: 0px;
  padding: 0px;
  display: inline;
}

#headNAV ul li input {
  margin: 5px 35px 10px 35px;
}


/*======================myPage-Nav============================*/

#myPage_button:hover>#myPage {
  color: white;
}

#myPage_button {
  text-decoration: underline;
}

#myPage {
  color: #50328ddc;
  font-size: 22px;
  font-weight: bold;
  text-decoration: underline;
}

#dropdown-btn {
  padding: 0px 10px;
}

#myPage-menu {
  margin: auto;
}

#headNAV ul li #myPage-menu li {
  position: absolute;
  background-color: #fff;
  display: inline-block;
  padding: 0px;
  border: none;
}

<header id="header">
  <nav id="headNAV">
    <ul>
      <li><a href="#">Mission</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Forums</a></li>
      <li><a id='myPage_button' href="#">My<span id='myPage'>Page</span><span id = "dropdown-btn" class="fas fa-caret-down"></span></a>
        <ul id="myPage-menu">
          <li><a href="#">Main Feed</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Messages</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Search</a></li>
        </ul>
      </li>
      <li><input type="text" name="search" placeholder="Search..."></li>
      <li><a id="header_login" href="#">Login/SignUp</a></li>
    </ul>
  </nav>
</header>

感谢您的任何意见！

• 凯文