导航栏下拉菜单宽度问题和悬停问题

Question

我创建了一个导航栏，当按钮悬停在上面时会显示一个下拉菜单。这是代码笔：https://codepen.io/sahxil/pen/qBoVgXg

我有三个问题：

带有下拉菜单的锚标签

1. 采用其下拉菜单的宽度，而我希望它的宽度是正常的，并且当该锚标签悬停在上面时，导航栏中应该没有任何变化除了下拉菜单出现。
具有下拉菜单的锚标签下方的红色下划线
2. 被移位，宽度等于下拉菜单宽度的 30%(下划线的宽度等于锚标签宽度的 30%，但锚标签的宽度不知何故等于下拉菜单的宽度)
3. 我希望下拉列表仅在悬停时显示，并在光标超出锚标记时消失。mouseoverEventListener似乎有效，但mouseout不起作用。我应该在我的JavaScript中更改什么确切的代码才能使其工作。

如何，我该解决这个问题？

Answer 1

有了像下拉菜单这样简单的东西，在可能的情况下使用 CSS 而不是 JavaScript 要容易得多(也可靠)，这看起来像是弄乱了你的菜单。我用一些 CSS 悬停和后代选择器修复了菜单。

另外两个问题涉及一些不正确的位置属性，以及一些不必要的复杂CSS属性，类和元素相互对抗，以及一些JavaScript e。我重构了很多HTML和类以使其更简洁，并删除了option和simple类，以及一些不必要的div。

为了修复红色下划线，我使用了CSS变量和calc()函数的组合来正确定位它，做了两件主要的事情。

首先，我设置了一个--width变量，以及行本身的实际宽度，与按钮(an li)的宽度相同，但减去两个字符(2em)，这样它看起来与按钮内的文本宽度大致相同。

ul:hover::after {
--width: calc(100% - 2em);
width: var(--width);
}

然后为了居中，我使用 calc() 函数将left属性设置为可用空间的一半。

left: calc(calc(100% - var(--width))/2);

我还将您的ul更改为menu，并使其display: flex带有间隙和填充，而不是您拥有的不同边距。

我在下面链接了我的固定(和简化)代码。希望一切都有意义！如果您需要更多帮助，请随时与我们联系！

body {
margin: 0;
background-color: #121212;
}
#header {
display: flex;
align-items: center;
justify-content: space-between;
background: rgb(0, 0, 0);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#header.headerr__black {
background-color: #121212;
}
#navbar {
width: 100vw;
display: flex;
align-items: flex-start;
justify-content: space-evenly;
padding: 0;
}
#navbar li {
list-style: none;
position: relative;
}
a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
ul {
padding: 1em;
margin: 0;
position: relative;
}
ul:hover::after {
content: "";
position: relative;
width: 100%;
height: 3px;
bottom: -0.2em;
left: 0;
}
ul li {
display: none;
}
ul:hover li {
display: block;
}

/* For changing color of navbar buttons when hovered on
and keeping the current page button as red */
#navbar ul a:hover {
color: #e50914;
}

/* For current page button eg: Why Snap Smile(if active); to have an underline when
that page is active or other buttons to display underline when hovered on */
ul:hover::after {
content: "";
position: absolute;
--width: calc(100% - 2em);
width: var(--width);
height: 3px;
background: #e50914;
bottom: 0.6em;
left: calc(calc(100% - var(--width))/2);
}
.logo {
width: 6em;
}
a.sBtn-text {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
a.sBtn-text:hover,
a.sBtn-text.active {
color: #e50914;
}
menu {
margin: 0;
position: absolute;
z-index: 1;
padding: 20px 40px;
margin-top: 10px;
border-radius: 0.5rem;
background: #141414;
display: none;
}
ul:hover menu {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.select-menu.active .options {
display: block;
}
.select-menu.inactive .options {
display: none;
}
.options .option {
display: flex;
margin-bottom: 0.5rem;
align-items: center;
}
div.select-btn {
position: relative;
}

<section id="header" class="headerr">
<div id="navbar">
<a href="#">
<img src="images/logo.png" class="logo">
</a>
<ul>
<a href="what.html">What is Snap Smile</a>
</ul>
<ul>
<a href="#">Teeth Spacing</a>
</ul>
<ul>
<a href="solutions.html">Solutions</a>
<menu>
<li>
<a href="#">Teeth Spacing</a>
</li>
<li>
<a href="#">Discolored/Stained Teeth</a>
</li>
<li>
<a href="#">Chipped Teeth</a>
</li>
<li>
<a href="#">Missing Teeth</a>
</li>
<li>
<a href="#">Straighter Smile</a>
</li>
<li>
<a href="#">Whiter Smile</a>
</li>
<li>
<a href="#">Cosmetic Enhancement</a>
</li>
<li>
<a href="#">Night Guard</a>
</li>
<li>
<a href="#">Dental Florosis</a>
</li>
<li>
<a href="#">Mild Teeth Crowding</a>
</li>
</menu>
</ul>
<ul>
<a href="how.html">How it Works</a>
</ul>
<ul>
<a href="pricing.html">Pricing</a>
</ul>
<ul>
<a href="about.html">About</a>
</ul>
<ul>
<a href="gallery.html">Gallery</a>
</ul>
<ul>
<a href="">
<i class="fa-sould fa-headset fa-2x"></i>
</a>
</ul>
</div>
</section>