Html 在显示<；时，我需要帮助修复下拉菜单的移动问题；李>；

问题是：

查看优惠和

li

：

放置

位置后：绝对



如何使我的下拉菜单，以便当我悬停在“提供”上时，文本不会向左移动？我还想减少李的宽度，因为它对我来说太大了

我尝试过更改display:property，并在HTML中的“Offers”一词前后放置空格。空间很有效，但我不喜欢，因为提供的空间看起来比其他选项更大


.nav{
位置：固定；
排名：0；
左：0；
保证金：0；
填充：0；
宽度：100%；
高度：80px；
}
.菜单{
浮动：对；
线高：80px；
边缘：0.9em；
文本对齐：居中；
字体系列：“Proxima Nova”；
文本转换：大写；
字体大小：粗体；
字母间距：0px；
}
.菜单ul{
边际：0px；
填充：0px；
列表样式：无；
}
李先生{
文本对齐：居中；
列表样式：无；
显示：内联表；
}
.菜单ul li a{
文字装饰：无；
颜色：白色；
字体大小：16px；
字体重量：较轻；
填充：0 20px；
过渡：所有.3s易于输入输出；
}
.菜单ul li a：悬停{
颜色：橙色；
}
.菜单ul li ul li{
显示：无；/*因此，除非悬停，否则li不会显示*/
}
.菜单ul li：悬停ul li{
过渡：全部。3秒轻松；
显示：块；
背景：rgba（0,0,0,6）；
}
第n个孩子（5）a{
颜色：白色；
边框：1px实心橙色；
填充：10px 20px；
边界半径：4px；
背景色：无；
过渡：所有1都放松；
}
第n个孩子（5）a:悬停{
过渡：全部。5秒轻松；
背景：rgba（204204204,0.5）；
颜色：橙色；
}














这是因为子菜单占据了一个位置，并使其父菜单
li
更宽

一种可能的解决方案是设置
ul
子
位置：绝对
，这样它就不会出现

像这样：

.menu-ul{
位置：绝对位置；
}

实例：


正文{
背景：url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg) 0 0;
背景尺寸：封面；
}
.导航{
位置：固定；
排名：0；
左：0；
保证金：0；
填充：0；
宽度：100%；
高度：80px；
}
.菜单{
浮动：对；
线高：80px；
边缘：0.9em；
文本对齐：居中；
字体系列：“Proxima Nova”；
文本转换：大写；
字体大小：粗体；
字母间距：0px；
}
.菜单ul{
边际：0px；
填充：0px；
列表样式：无；
}
李先生{
文本对齐：居中；
列表样式：无；
显示：内联表；
位置：相对位置；
}
.菜单ul li a{
文字装饰：无；
颜色：白色；
字体大小：16px；
字体重量：较轻；
填充：0 20px；
过渡：所有.3s易于输入输出；
}
.菜单ul li a：悬停{
颜色：橙色；
}
.菜单{
位置：绝对位置；
宽度：100%；
}
.菜单ul li ul li{
显示：无；
/*所以我不会出现，除非停下来*/
}
.菜单ul li ul li a{
填充：0；
文本对齐：居中；
}
.菜单ul li：悬停ul li{
过渡：全部。3秒轻松；
显示：块；
背景：rgba（0,0,0,6）；
}
第n个孩子（5）a{
颜色：白色；
边框：1px实心橙色；
填充：10px 20px；
边界半径：4px；
背景色：无；
过渡：所有1都放松；
}
第n个孩子（5）a:悬停{
过渡：全部。5秒轻松；
背景：rgba（204204204,0.5）；
颜色：橙色；
}














问题在于下拉列表中列表项的最小内容大小大于顶部菜单中父列表项的大小

e、 g.“包”的渲染速度为120像素，而“提供”的渲染速度为98像素

最简单的解决方案是根据最长单词的最大内容大小为所有列表项设置最大宽度（虽然不是很动态）

否则，使用
position:absolute
布局子菜单，如本例所示：

非常简单，请使用：
.menu li{位置：相对；}.menu li ul{位置：绝对；顶部：您的水平导航高度；左侧：0；}

而且你的代码也有错误，一定是这样的：

<ul>
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li>
    <a href="">Link 3</a>
    <ul>
      <li><a href="">SubLink 1</a></li>
      <li><a href="">SubLink 2</a></li>
      <li><a href="">SubLink 3</a></li>
      <li><a href="">SubLink 4</a></li>
     </ul>
   </li>
  <li><a href="">Link 4</a></li>
</ul>

ul li {position: relative;}
ul li ul {position: absolute; display: none;}
ul li:hover ul {display: block;}














ul li{位置：相对；}
ul li ul{位置：绝对；显示：无；}
ul li:悬停ul{display:block；}
检查此项：@Cichy您的示例更改了菜单的行为方式，因此现在菜单不是垂直显示，而是水平显示。请重新编辑问题。这个想法是，人们可以利用你的问题进行学习。你不必在问题得到回答后删除它。只要接受你认为最能回答你问题的答案。减小子菜单的宽度（如果我理解正确）怎么样？@Morpheus我不喜欢覆盖元素的本机宽度，因为它不是泛型的（如果父菜单项更宽，因为菜单项的文本更长）。此外，它可能会剪切内容。@Adrian
宽度
来自项目的内容宽度+
a
标记具有
填充
，因此您可以删除
填充
，它将减少
宽度
。我不确定是否理解该要求。子菜单包含
程序包
，其宽度比
提供的要宽
，因此如何使其具有相同的宽度？因此减少
填充
。请注意，它将不再是gen