如何在导航菜单中的 CSS 中解决这些问题？答案

【问题标题】：How to fix these issues in CSS in navigation menu?如何在导航菜单中的 CSS 中解决这些问题？
【发布时间】：2018-11-26 12:16:42
【问题描述】：

请帮助我在 CSS（没有 JS）中解决这些问题。我正在学习，无法找到一些导航问题的答案。请不要怪我:)

我为网站创建了导航和第一个屏幕，但遇到了这些问题。这是所有内容的屏幕截图：https://prnt.sc/ln3ytx 和我在 Codepen 上的笔：https://codepen.io/a007mr/pen/mQKyYM

如何使所有行的背景悬停？我的代码是.menu-item ul a:hover {color: #000000; background: #d2d4d6; 但它也不起作用。怎么弄成这样：https://prnt.sc/ln3mvm
当我打开下拉菜单时，部分导航正在向右跳转。如何避免这种跳跃？
如何在任何桌面尺寸的角落制作导航按钮？我在用 margin: 15px; 但是当我制作更多的屏幕分辨率时，它就不能很好地工作了。它没有响应。如果我选择更大的桌面，按钮将不在右上角。
所有导航都存在同样的问题。如何定位导航任何桌面尺寸都集中在一个地方？
如何通过点击（非悬停）打开下拉菜单，只通过点击隐藏下拉菜单？我的代码li:hover > ul。如果我在li:active > ul 上进行更改，那么只有当我按住按钮时才会出现下拉菜单。如何制作 *click 按钮 -> 我们显示下拉菜单并可以选择一些内容 -> *other 点击“了解更多”并隐藏菜单。
如何在主按钮下方设置边距？ :) 我写了margin-top: 20px;，但它不起作用。
如何让所有导航的背景都没有边距？

怎么了？我该如何解决？请帮忙。

【问题讨论】：

欢迎来到 Stack Overflow！这个问题要么过于宽泛，要么基于意见，要么需要讨论，因此对于 Stack Overflow 来说是题外话。如果您有一个特定的、可回答的编程问题，请提供完整的详细信息。
请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放入问题本身。

【解决方案1】：

我会尽量给你一些回复：

如何使所有行的背景悬停？我的代码是 .menu-item ul a:hover {color: #000000;背景：#d2d4d6；但它也不起作用。怎么弄成这样：https://prnt.sc/ln3mvm

1) Try uses block elements. Remember that css property 
 display: block; makes your element a block element.

当我打开下拉菜单时，部分导航正在向右跳转。如何避免这种跳跃？

2) Your items in the list must be made as blocks and it item (li>a) need to be 
increased.

常见示例： https://codepen.io/bear-wolf/pen/YRvoWO?editors=1100#0

【讨论】：