完整的画布菜单

Question

我试图制作一个非画布菜单，但遇到了问题。 只有两个第一个菜单链接显示灰黑色背景，但我希望所有菜单链接都有。其余5个菜单链接确实在菜单中（当您将鼠标悬停在链接上时可以看到），但它们具有透明背景。

我将html和css代码放入Jsfiddle：https://jsfiddle.net/ghbx6fmn

P.S。这些代码似乎在Jsfiddle上工作正常，但在我的网站上它没有...

＆＃13;

＆＃13;

res.render('htmlPage',{
  tweettxt:tweettxt
});

＆＃13;

<%= tweettxt %>

＆＃13;

＆＃13;

＆＃13;

Answer 1

注意：我对HTML / CSS的结构并不感到兴奋，并认为它可以使用重构器。我的回答将解决您遇到的问题，但您的目标应该是进一步简化代码。

问题1 ：您的菜单不会增加灰色背景的高度，因为菜单是绝对定位的元素，因此位于document flow之外。

确保灰色背景填充整个视口的最简单方法是：

.full-screen-close {
  ...
  p̶o̶s̶i̶t̶i̶o̶n̶:̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶;̶
  position: fixed;
}

问题2 ：现在我们已经解决了第一个问题，我们看到菜单背后的蓝色背景并没有完全延伸。

没问题。我们只需删除height属性。

.menu-container {
  ...
  h̶e̶i̶g̶h̶t̶:̶ ̶1̶0̶0̶%̶;̶
}

现在，.menu-container和身高一样高，而不是父母身高的100％。

看看：https://jsfiddle.net/ghbx6fmn/2/