如何修复我的代码，以便下拉菜单与导航栏（父级）对齐？ [英] How do I fix my code so that the dropdown menu aligns with the navigation bar (parent)?

问题描述

当我将鼠标悬停在开始使用时，我正在尝试对齐下拉菜单，但它不起作用。

I'm trying to align the dropdown menu when I hover over get started, but it doesn't work.

我尝试添加代码 left：auto;右：0; margin-right：-10px; 到我的CSS（你将在下面看到），但它没有做任何事情。

I tried adding the code left:auto; right:0; margin-right:-10px; to my CSS (as you'll see below) but it did nothing.

如何修复此问题或添加其他代码以使菜单对齐？

How do I fix this or add another code to make my menu aligned?

是否有某种CSS技巧可以解决这个问题？

Is there a certain CSS trick to solve this?

nav ul {
  background: url(transparent.png);
  width: 100%;
  height: 52px;
  text-align: center;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  letter-spacing: 0.2em;
  font: normal 100% arial, sans-serif;
  text-align: center;
  display: inline-block;
  margin: 10px 0 0 10px;
  padding: 9px 26px 9px 26px;
  text-transform: uppercase;
}

nav ul li a:hover {
  color: #000;
  background-color: #fff;
}

.dropdown {
  display: inline-block;
}

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

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

.dropdown-content a:hover {
  background: #bada55;
  left: auto;
  right: 0;
  margin-right: -10px;
}

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

<header>
  <h1>Model United Nations Conference</h1>
  <img src="dove.png" alt="a simple dove logo">

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="dropdown"><a id="start" href="#">Get started</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Forum</a></li>
    </ul>
  </nav>
</header>

推荐答案

nav ul {
  background: url(transparent.png);
  width: 100%;
  height: 52px;
  text-align: center;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
  position:relative
}
nav ul li >a {margin: 10px 0 0 10px;}
nav ul li a {
  text-decoration: none;
  color: #000;
  letter-spacing: 0.2em;
  font: normal 100% arial, sans-serif;
  text-align: center;
  display: inline-block;
  
  padding: 9px 26px 9px 26px;
  text-transform: uppercase;
}

nav ul li:hover a{
  color: #000;
  background-color: #fff;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  background: #f9f9f9;
  min-width: 160px;
  position: absolute;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  left: 10px;
}

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

.dropdown-content a:hover {
  background: #bada55;
  left: auto;
  right: 0;
 
}

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

<header>
  <h1>Model United Nations Conference</h1>
  <img src="dove.png" alt="a simple dove logo">

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="dropdown"><a id="start" href="#">Get started</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Forum</a></li>
    </ul>
  </nav>
</header>

这篇关于如何修复我的代码，以便下拉菜单与导航栏（父级）对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！