Javascript 如何防止UL采用下拉菜单的全高属性？

我有一个粘性的导航栏，从外观和感觉上看几乎是完整的。但是，每当我在任何链接中添加下拉菜单时，它都会创建一个不可见的字段，该字段将隐藏其中的文本。经过一些挖掘，我发现UL具有下拉列表的全高属性，即使它目前不可见。我的目标是尽可能使下拉菜单成为自己的实体，这样就不会出现这种情况。最终结果将使菜单具有更高的z索引，并且只覆盖其正下方的内容，直到您将鼠标移离它

在这个过程中，我还遇到了一个小问题，即当鼠标悬停在元素将出现的空间上时，下拉菜单会出现。这是一种不希望出现的效果，我认为这是问题的根源

下面是出现下拉菜单时发生的情况：

以下是没有它会发生什么：

这是一本书。如果你有问题的标志出现，只要看看网站。另外请记住，我还没有针对更小的屏幕进行优化，所以请扩展宽度，直到导航栏水平

网站链接：

我当前的代码：

HTML:

JS:

jQuery（文档）.ready（函数（）{
//定义变量
var navOffset，scrollPos=0；
//添加用于定位的实用工具包装器元素
jQuery（“nav”）.wrap（“”）；
jQuery（“nav”）。wrapInner（“”）；
jQuery（“.nav-inner”）.wrapInner（“”）；
//用于在页面加载和窗口大小调整时运行的函数
函数stickyUtility（）{
//仅在当前未使用固定位置时更新navOffset
如果（！jQuery（“nav”）.hasClass（“固定”））{
navOffset=jQuery（“nav”）.offset（）.top；
}
//将匹配高度应用于导航包装div，以避免内容跳转
jQuery（“.nav占位符”）.height（jQuery（“nav”）.outerHeight（））；
}//end stickyUtility函数
//在页面加载时运行
粘性效用（）；
//运行时调整窗口大小
jQuery（窗口）.resize（函数（）{
粘性效用（）；
});
//滚动运行事件
jQuery（窗口）.滚动（函数（）{
scrollPos=jQuery（窗口）.scrollTop（）；
如果（滚动位置>=导航偏移）{
jQuery（“nav”）.addClass（“固定”）；
}否则{
jQuery（“nav”）。removeClass（“固定”）；
}
});
});
$（文档）。滚动（函数（）{
var y=$（this.scrollTop（）；
如果（y>600）{
$（'.Logo2'）.fadeIn（）；
}否则{
$（'.Logo2'）.fadeOut（）；
}
});

提前谢谢大家,

---

因为如果你使用不透明度：0；或可见性：隐藏；尽管隐藏了元素，但始终保留空间。另一方面，您可以添加位置：绝对；如果需要不透明度：0

因为如果使用不透明度：0；或可见性：隐藏；尽管隐藏了元素，但始终保留空间。另一方面，您可以添加位置：绝对；如果需要不透明度：0

这是因为您的

.Dropdown

元素的样式为

位置：relative和<代码>不透明度：0

这意味着它是隐藏的，但仍然占用了DOM中的空间

为了创建这种下拉导航菜单，人们通常使用绝对定位来解决这个问题。当您定位某个绝对元素时，它不再占用DOM中的空间，但它必须使用

position:relative锚定到父元素。在这种情况下，这将是
nav>ul>li

因此，要解决此问题，您需要更新以下样式：

nav  ul  li {
  position: relative; /* add this for an anchor point*/
  display: inline-block;
  margin: 15px;
  text-align: center;
}

.Dropdown {
    position: absolute; /* add this to position the dropdown off the li parent */
    top: 100%; /* put it at the very bottom of the li*/
    left: 0;
    opacity: 0;
    z-index: -1;
}

看这个演示

你的小提琴也有这种反应灵敏的风格：

@media (max-width: 1200px) {
    nav ul li{
        display: inline;
   }
}

你应该把它改成

@media (max-width: 1200px) {
    nav ul li{
        display: block;
   }
}

但是你说我还没有针对更小的屏幕进行优化，所以我认为这种风格只是为了演示。
这是因为你的
.Dropdown
元素的风格是
position:relative和<代码>不透明度：0
这意味着它是隐藏的，但仍然占用了DOM中的空间

为了创建这种下拉导航菜单，人们通常使用绝对定位来解决这个问题。当您定位某个绝对元素时，它不再占用DOM中的空间，但它必须使用
position:relative锚定到父元素。在这种情况下，这将是
nav>ul>li

因此，要解决此问题，您需要更新以下样式：

nav  ul  li {
  position: relative; /* add this for an anchor point*/
  display: inline-block;
  margin: 15px;
  text-align: center;
}

.Dropdown {
    position: absolute; /* add this to position the dropdown off the li parent */
    top: 100%; /* put it at the very bottom of the li*/
    left: 0;
    opacity: 0;
    z-index: -1;
}

看这个演示

你的小提琴也有这种反应灵敏的风格：

@media (max-width: 1200px) {
    nav ul li{
        display: inline;
   }
}

你应该把它改成

@media (max-width: 1200px) {
    nav ul li{
        display: block;
   }
}

但是你说我还没有针对更小的屏幕进行优化，所以我认为这种风格只是为了演示。
是的！像那样。至于调整菜单的宽度以使其看起来更好，我想我应该调整父菜单？我把我的评论变成了一个答案来解释我所做的更改。是的！像那样。至于调整菜单的宽度以使其看起来更好，我想我应该调整父菜单？我将我的评论变成了一个答案来解释我所做的更改。谢谢！这很好地解释了一切。还感谢您修复了媒体屏幕部分：）如何调整父屏幕宽度以使其余部分正确就位？我尝试将宽度属性添加到该链接的HTML部分，但没有成功。忽略我的最后一个问题，我决定在父对象上保留相同的宽度，并调整下拉菜单的大小以使其看起来更好。谢谢！这很好地解释了一切。还感谢您修复了媒体屏幕部分：）如何调整父屏幕宽度以使其余部分正确就位？我曾尝试将宽度属性添加到该链接的HTML部分，但没有成功。忽略我的最后一个问题，我决定在父对象上保留相同的宽度，并调整下拉菜单的大小以使其看起来更好。