导航下拉菜单无法正常工作

Question

我正在尝试在我的导航菜单中创建一个 link 购买提示作为下拉菜单。我运行遇到了一些问题，但我似乎无法解决这些问题。

出于某种原因，当我滚动浏览“购买提示”时，下拉菜单的第一个选项与导航菜单重叠。我不确定为什么会发生这种情况以及如何纠正它。
我想显示下拉箭头，但不确定如何在 CSS 中对此进行编码。
我希望导航 link 的间距相等，并且购买提示全部在一行上。（请查看图片以查看问题）我尝试更改导航栏的宽度并更改导航的字体大小 links 但这没有帮助。

Printscreen of navigation issues on webpage

.navbar {
  width: 100%;
  background-color: black;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 5px;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  width: 24%;
}

.navbar a:hover {
  color: #FFA500
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .BuyTip {
  float: left;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 200px;
}

.dropdown-content a {
  float: none;
  color: black;
  display: block;
  text-align: left;
  font-size: 10px;
}

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

@media screen and (max-width: 480px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
  }
}

<div class="navbar">
  <a href="index.htm">Chade's Bicycle Company</a>
  <div class="dropdown">
    <a class="BuyTip">Buying Tips</a>
    <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="arg_3_buying.htm#Right">Choosing The Correct Bike</a>
      <a href="arg_3_buying.htm#Budget">Setting A Budget</a>
      <a href="arg_3_buying.htm#Test">Test-Ride Before Buying</a>
      <a href="arg_3_buying.htm#Size">Choosing The Correct Size</a>
      <a href="arg_3_buying.htm#Accessories">The Essential Accessories</a>
    </div>
  </div>
  <a href="arg_2_cal.htm">Company Calendar</a>
  <a href="arg_2_contact.htm">Contact Us </a>
</div>

Answer 1

我已经更改了您的代码以获得所需的结果。至于你问的问题：

由于您已经使元素带有 .dropdown class absolutely 定位，因此它将粘在顶部，因为它没有相对父元素。
我使用了 CSS border 属性来创建一个箭头。您可以根据需要自定义它。（甚至可以将其替换为您最初使用的插入符号 class，只要您将其放置适当即可。）
您可以使用 CSS margin 或 padding 属性控制导航链接之间的间距。 read-more about padding and margin.

.navbar {
  width: 100%;
  background-color: black;
  overflow: auto;
  font-size: 0;
}

.navbar li {
  display: inline-block;
  margin: 0 10px;
}

.navbar li a {
  display: block;
  padding: 5px;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
}

.navbar a:hover {
  color: #FFA500
}

.dropdown>a {
  position: relative;
  padding-right: 10px;
}

.dropdown>a:after {
  content: "";
  display: block;
  border-width: 6px;
  border-style: solid;
  border-right: 6px solid transparent;
  border-color: red transparent transparent;
  width: 0;
  height: 0;
  position: absolute;
  right: -14px;
  top: 14px;
}

.dropdown-content {
  display: none;
  position: absolute;
  padding: 10px 0;
}

.navbar li .dropdown-content a {
  color: black;
  display: block;
  text-align: left;
  font-size: 10px;
}

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

@media screen and (max-width: 800px) {
  .navbar li a {
    font-size: 16px;
  }
  .dropdown>a:after {
    border-width: 5px;
    border-right: 5px solid transparent;
    right: -10px;
    top: 12px;
}
}

<div class="navbar">
  <ul>
    <li><a href="index.htm">Chade's Bicycle Company</a></li>
    <li class="dropdown">
      <a>Buying Tips</a>
      <div class="dropdown-content">
        <a href="arg_3_buying.htm#Right">Choosing The Correct Bike</a>
        <a href="arg_3_buying.htm#Budget">Setting A Budget</a>
        <a href="arg_3_buying.htm#Test">Test-Ride Before Buying</a>
        <a href="arg_3_buying.htm#Size">Choosing The Correct Size</a>
        <a href="arg_3_buying.htm#Accessories">The Essential Accessories</a>
      </div>
    </li>
    <li><a href="arg_2_cal.htm">Company Calendar</a></li>
    <li><a href="arg_2_contact.htm">Contact Us </a></li>
  </ul>
</div>

导航下拉菜单无法正常工作

Navigation Drop-Down Menu not working Properly

html

css

navigation

menu

drop-down-menu