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

Posted 2023-04-13

【中文标题】导航下拉菜单无法正常工作

【英文标题】：Navigation Drop-Down Menu not working Properly

【发布时间】：2021-07-03 21:53:20

【问题描述】：

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

由于某种原因，当我滚动浏览购买提示时，下拉菜单的第一个选项与导航菜单重叠。我不确定为什么会发生这种情况以及如何纠正。

我希望显示下拉箭头，但不确定如何在 CSS 中编码。

我希望导航链接的间距相等，并且购买提示都在一条线上。 （请查看图片以查看问题）我尝试更改导航栏的宽度并更改导航链接的字体大小，但这无济于事。

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>

【参考方案1】：

我已更改您的代码以达到预期的效果。 至于你问的问题：

由于您已将带有.dropdown 类absolutely 的元素定位，因此它会粘在顶部，因为它没有相对父级。

我使用 CSS border 属性来创建箭头。您可以根据需要自定义它。 （甚至可以将其替换为您最初使用的插入符号类，只要您放置得当。）

您可以使用 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>