导航子菜单无法正确显示

Question

所以我正在为一个学校项目工作一个小型HP，我有点卡在导航栏上。当我将鼠标悬停在“图库”上时，子菜单会打开并出现问题： 我正在尝试并尝试但似乎无法找到一种方法来获取仅用于子菜单区域的backgroundcolor而不是它左侧的整个页面......

我确信这很容易解决，但我正在努力解决这个问题

这是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;
}