导航子菜单显示不正确

Question

所以我正在为一个学校项目开发一个小型 HP，我有点受困于导航栏。当我将鼠标悬停在 "Gallery" 上时，子菜单打开，出现问题： 我一直在尝试，但似乎无法找到一种方法来只为子菜单区域而不是它左侧的整个页面获取背景颜色...

我确定这很容易修复，但我在 atm 上遇到困难

这是 jsfiddle： https://jsfiddle.net/67wq84g9

我认为这里有一些东西，但如果我改变宽度并将鼠标悬停在子菜单上，它不会完全改变颜色。

.menu ul {
    display: none;
    width: 100%;
}

有什么想法吗？

Answer 1

你能为

设置宽度吗

    .menu ul {
  list-style: none;
  background: #7ebc71;
  padding: 0;
  position: absolute;
  top: 100%;
  width:80px;
}

和

 .menu ul li a:hover {
  background: #557F4C;
  width :80px;
}