将我的下拉导航调整为与其父/按钮相同的大小

Question

我一直在尝试创建一个个人网页。 它的顶部有一个导航栏，我最满意的是，除了我无法使下拉导航框（使用事件侦听器由 JS 控制）与其父元素 --> 按钮的大小相同。我想做的就是让它们具有相同的宽度。以下是 HTML、CSS 的片段以及当前外观的屏幕截图。

HTML 代码

    <nav>
      <ul class="navbar">
        <img src="/Images/logo.png" class="logo" alt="logo">
        <li class="link"><a href="/index.html">Home</a></li>
        <span class="nav_divider"></span> <!-- this span styles the lines in between the links in the nav bar via a ::before psuedo class-->
        <li class="link" id="ms_access"> <!-- the list item containing the link and the drop down. this is the parent element.-->
          <a href="#">MS Access</a>
          <div class="drop" id="drop_msaccess" > <!--this is the drop down menu.-->
            <ul>
              <li><a href="/Pages/survey.html">Customer Survey</a></li>
              <li><a href="#">Territorian Passes</a></li>
              <li><a href="#">Distributor Tickets</a></li> 
              <li><a href="#">Reports</a></li>
              <li><a href="#">Feedback & Help</a></li>
            </ul>
          </div>
        </li>
        <span class="nav_divider"></span>
        <li class="link" id="re_express"> 
          <a href="#">Retail Express</a>
          <div class="drop" id="re_drop">
            <ul>
              <li><a href="#">Reporting</a></li>
              <li><a href="#">End of Day</a></li>
              <li><a href="#">End of Month</a></li>
            </ul>
          </div>
        </li>
        <span class="nav_divider"></span>
        <li class="link"><a href="#">Distributor Tickets</a></li>
        <img src="/Images/logo.png" alt="logo" class="logo">
      </ul>
    </nav>

CSS 代码

导航栏

ul.navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding-inline: 40px;
    overflow: hidden;
    background-color: var(--light-grey);
    box-shadow: 0 5px 3px var(--dark-grey);
    font-size: var(--fs-lrg);
    font-weight: var(--fw-semibold);
}

ul.navbar li {
    flex: 1;
}

li.link > a {
    display: block;
    margin-inline: 5px;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--dark);
    border: 2px solid var(--light-grey);
    border-radius: 8px;
    transition: 0.1s;
}

li.link > a:hover {
    background-color: var(--dark-grey);
    translate: 0 -2px;
    transition: 0.2s;
}

下拉菜单

.drop {
    display: none;
    position: absolute;
    z-index: 1;
    box-shadow: var(--shadow);
    background-color: var(--dark-grey);
    color: var(--dark);
    border-radius: 0 0 15px 15px;
}

.drop ul {
    width: 100%;
}

div.drop ul li {
    padding: 0.6rem;
    transition: 0.2s;
    width: 100%;
}

div.drop ul li:hover {
    background-color: var(--accent-orange);
    transition: 0.3s;
}

div.drop ul li:last-of-type {
    border-radius: 0 0 15px 15px;
}

div.drop ul li:hover:last-of-type {
    border-radius: 0 0 15px 15px;
}

.show {
    display: block;
}

.logo {
    height: 100px;
}

span.nav_divider::before {
    content: "";
    border: 1px solid var(--dark-grey);
}

我尝试给

ul.navbar li

一个固定的宽度，然后给

.drop

width: inherit;

但这似乎也不起作用。 我意识到我可以尝试使用

calc

计算导航栏链接的宽度，然后使用它，但这对于所有其他元素（图片和跨度）以及它们各自的边距和填充来说似乎非常困难和繁琐。

请注意，我这样做只是为了好玩，而且总体来说我对编码还很陌生，所以我们感谢任何帮助，并欢迎建设性的批评。

提前致谢

Answer 1

如何调整CSS：

1. 将父元素（.link）设置为position：relative。
2. 确保下拉菜单 (.drop) 的位置：绝对且宽度：100%。

更新了CSS：

ul.navbar li {
   flex: 1;
   position: relative; /* Add this line */
}

.drop {
   display: none;
   position: absolute;
   top: 100%; /* Adjust as needed */
   left: 0;
   width: 100%; /* Make it the same width as the parent */
   z-index: 1;
   box-shadow: var(--shadow);
   background-color: var(--dark-grey);
   color: var(--dark);
   border-radius: 0 0 15px 15px;
}

JavaScript 事件监听器： 确保用于切换下拉列表的 JavaScript 正确设置类“.show”。

例如-

    document.querySelectorAll('.link').forEach(item => {
    item.addEventListener('click', event => {
        let dropdown = item.querySelector('.drop');
        if (dropdown.classList.contains('show')) {
            dropdown.classList.remove('show');
        } else {
            // close any open dropdowns
            document.querySelectorAll('.drop').forEach(drop => 
            drop.classList.remove('show'));
            // open the clicked dropdown
            dropdown.classList.add('show');
        }
    });
});