Html 下拉菜单不稳定

我正在从事以下项目：

/*第二条*/
.割台两条。割台第二条{
背景色：#ffffff；
盒影：1px 3px 3px 0 rgba（0,0,0,0.05）；
填充：20px 40px；
}
.收割台两条横杆。收割台第二条横杆导航{
字体：14px Arial，Helvetica，无衬线；
}
.收割台两条横杆。收割台第二条横杆导航a{
显示：内联块；
颜色：#4e5359；
文字装饰：无；
左侧填充：12px；
右侧填充：12px；
}
.收割台两个栏。收割台第二个栏导航a：悬停{
边界半径：2px；
背景色：#2B5773；
填充顶部：8px；
垫底：8px；
颜色：白色；
不透明度：0.7；
}
.收割台两个栏。选择收割台第二个栏导航a{
边界半径：2px；
背景色：#2B5773；
填充：8px 12px；
颜色：白色；
}
.清楚{
明确：两者皆有；
}
/*下拉菜单*/
.dropbtn{
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
边际上限：0px；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：99；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
宽度：继承；
}
.下拉列表内容a：悬停{
背景色：#f1f1；
填充顶部：首字母；
填充底部：初始；}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
}

---

我认为您可以为下拉元素添加以下css

。下拉：悬停。下拉内容a{padding:12px 16px；}

请看最新的小提琴，希望这会有所帮助

/*第二条*/
.割台两条。割台第二条{
背景色：#ffffff；
盒影：1px 3px 3px 0 rgba（0,0,0,0.05）；
填充：20px 40px；
}
.收割台两条横杆。收割台第二条横杆导航{
字体：14px Arial，Helvetica，无衬线；
}
.收割台两条横杆。收割台第二条横杆导航a{
显示：内联块；
颜色：#4e5359；
文字装饰：无；
左侧填充：12px；
右侧填充：12px；
}
.收割台两个栏。收割台第二个栏导航a：悬停{
边界半径：2px；
背景色：#2B5773；
填充顶部：8px；
垫底：8px；
颜色：白色；
不透明度：0.7；
}
.收割台两个栏。选择收割台第二个栏导航a{
边界半径：2px；
背景色：#2B5773；
填充：8px 12px；
颜色：白色；
}
.清楚{
明确：两者皆有；
}
/*下拉菜单*/
.dropbtn{
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
边际上限：0px；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：99；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
宽度：继承；
}
.下拉列表内容a：悬停{
背景色：#f1f1；
填充顶部：首字母；
填充底部：初始；}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:hover.dropdown内容a{padding:12px 16px；}
.dropdown:悬停.dropbtn{
}

---

我认为您可以为下拉元素添加以下css

。下拉：悬停。下拉内容a{padding:12px 16px；}

请看最新的小提琴，希望这会有所帮助

/*第二条*/
.割台两条。割台第二条{
背景色：#ffffff；
盒影：1px 3px 3px 0 rgba（0,0,0,0.05）；
填充：20px 40px；
}
.收割台两条横杆。收割台第二条横杆导航{
字体：14px Arial，Helvetica，无衬线；
}
.收割台两条横杆。收割台第二条横杆导航a{
显示：内联块；
颜色：#4e5359；
文字装饰：无；
左侧填充：12px；
右侧填充：12px；
}
.收割台两个栏。收割台第二个栏导航a：悬停{
边界半径：2px；
背景色：#2B5773；
填充顶部：8px；
垫底：8px；
颜色：白色；
不透明度：0.7；
}
.收割台两个栏。选择收割台第二个栏导航a{
边界半径：2px；
背景色：#2B5773；
填充：8px 12px；
颜色：白色；
}
.清楚{
明确：两者皆有；
}
/*下拉菜单*/
.dropbtn{
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
边际上限：0px；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：99；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
宽度：继承；
}
.下拉列表内容a：悬停{
背景色：#f1f1；
填充顶部：首字母；
填充底部：初始；}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:hover.dropdown内容a{padding:12px 16px；}
.dropdown:悬停.dropbtn{
}

从

中删除这些行。下拉列表内容a:hover

使其工作

padding-top: initial; 
padding-bottom: initial;

从

中删除这些行。下拉列表内容a:hover

使其工作

padding-top: initial; 
padding-bottom: initial;

---

这个解决方案并没有删除导致问题的冗余代码，而是绕过了它。见@Keiwan的答案。它只是简单地面对问题，删除冗余代码，使解决方案更加优雅。这种解决方案不是删除导致问题的冗余代码，而是绕过它。见@Keiwan的答案。它只是简单地面对问题，删除冗余代码，使解决方案更加优雅。