如何使下拉菜单居中？

Question

我一直在网站上工作，想知道如何让这个下拉菜单居中，我作为码笔的代码是codepen 这是 css 我尝试了很多事情，包括将 position 标签更改为不同的值并添加填充和其他间隙

<nav class="navbar">
  <div class="logo">
    <a href=index.html>
      <img src="Addy Schroeders.png" width="60px" height="60px">
    </a>
  </div>
  <div class="menu">
    <li>
      <a href="/">
        Home
      </a>
    </li>
    <li>
      <a href="/">
        About
      </a>
    </li>
    <li>
      <a href="/">
        help and resources
      </a>
    </li>
    <li class="services">
      <a href="/">
        pages
      </a>
      <!-- DROPDOWN MENU -->
      <ul class="dropdown">
        <li>
          <a href="template.html">
            Dropdown 1
          </a>
        </li>
        <li>
          <a href="/">
            Dropdown 2
          </a>
        </li>
        <li>
          <a href="/">
            Dropdown 2
          </a>
        </li>
        <li>
          <a href="/">
            Dropdown 3
          </a>
        </li>
        <li>
          <a href="/">
            Dropdown 4
          </a>
        </li>
      </ul>
    <li>
      <a href="/">
        Contact
      </a>
    </li>
  </div>
  </ul>
</nav>

body {
  font-family: opendyslexic, sans-serif;
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #f7abff /* pink */;
}

li {
  list-style: none;
}

.navbar {
  display: flex; /* stops the logo being on top of everything else */
  align-items: center; /* centres them vertically */
  justify-content: space-between; /* puts navbar at right */
  padding: 20px; /* adds space at the top */
  background-color: rgb(85, 96, 255)/* blue */; /* the background color */
}

.services {
  position: relative;
  float: right;
}

.dropdown {
  background-color: #5560ff/* pink */; /* this makes the dropdown menu colored */
  padding: 1em 0;
  position: absolute;
  display: none;
  border-radius: 8px;
  top: 30px;
  padding-right: 20px;
  padding-left: 20px;

}

.services:hover .dropdown {
  display: block;
}

.image{
  border-radius: 50%;
}

    body {
  font-family: opendyslexic, sans-serif;
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #f7abff /* pink */;
}

li {
  list-style: none;
}

.navbar {
  display: flex; /* stops the logo being on top of everything else */
  align-items: center; /* centres them vertically */
  justify-content: space-between; /* puts navbar at right */
  padding: 20px; /* adds space at the top */
  background-color: rgb(85, 96, 255)/* blue */; /* the background color */
}

.services {
  position: relative;
  float: right;
}

.dropdown {
  background-color: #5560ff/* pink */; /* this makes the dropdown menu colored */
  padding: 1em 0;
  position: absolute;
  display: none;
  border-radius: 8px;
  top: 30px;
  padding-right: 20px;
  padding-left: 20px;

}

.services:hover .dropdown {
  display: block;
}

.image{
  border-radius: 50%;
}

我一直在查找许多其他的东西并经历了一堆问题，但作为一个初学者，我不知道我需要用这些答案做什么如果我能得到 CSS 代码及其所在位置并对其作用进行简短描述，我们将不胜感激

Answer 1

@amauryHanser 给了我答案我添加了这个

.dropdown { 
  left: -50%; }

它已经修复并向左移动了一点，我可以调整数字直到它起作用

Answer 2

.services {
    position: relative;
}

.dropdown {
    background-color: #5560ff/* pink */;
    padding: 1em 0;
    position: absolute;
    border-radius: 8px;
    top: 2rem;
    padding-right: 20px;
    padding-left: 20px;
    left: 50%;
    transform: translateX(-50%);
}

试试这个 :D

如何使下拉菜单居中？

how can I center a dropdown menu?

html

css

dropdown

centering