时间戳

首页 > 解决方案 > 如何在导航菜单中的 CSS 中解决这些问题？

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

问题描述

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

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

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

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

  3. 如何在任何桌面尺寸的角落制作导航按钮？我正在使用 margin: 15px; ，但是当我要提高屏幕分辨率时它不能很好地工作。它没有响应。如果我选择较大的桌面，该按钮将不在右上角。

  4. 所有导航都存在同样的问题。如何为任何桌面尺寸在一个地方定位导航？

  5. 如何通过单击（而不是悬停）打开下拉菜单并仅通过单击隐藏下拉菜单？我的代码li:hover > ul。如果我改变，li:active > ul那么只有当我按住按钮时才会出现下拉菜单。如何制作 *click 按钮 -> 我们显示下拉菜单并可以选择某些内容 -> *other 点击“了解更多”并隐藏菜单。

  6. 如何在主按钮下方设置边距？:) 我写了margin-top: 20px;，但它不起作用。

  7. 如何让所有导航的背景都没有边距？

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

标签： htmlcssnavigationsites

解决方案

我会尽力给你一些答复：

如何使所有行的背景悬停？我的代码是 .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

推荐阅读