Question

我的页面是https://visiapera.wordpress.com/。我一直试图在我的下拉菜单中进行一些更改，但它似乎不起作用。

当鼠标结束时，我试图替换红色，并且只是在下划线。然后，即使我将文本对齐到左边，它也不会将它对齐到主标题的左侧。我将不胜感激任何建议......

.main-menu ul a {
  text-align: left;
  width: 170px;
  padding-left: 8%;
  padding-right: 0;
  margin-left: 15%;
  border-top: 1px;
  border-bottom: 1px;
  border-left: 0;
  border-right: 0;
  background-color: rgba(255,255,255,0.6);
}

详细说明：如果您转到“设计”标题的下拉菜单，您将看到它与实际标题（即“设计”）不对齐。然后，当鼠标经过下拉菜单时，它会变成红色而我不想拥有它（我只希望它是白色的）。我希望现在很清楚，因为无法上传任何照片...... :(

Answer 1

要获得所需的悬停效果：

你应该改变：

.main-menu ul a:hover { background: #ca2017 none repeat scroll 0 0; border-color: #ca2017; color: #fff; }

类似于：

.main-menu ul a:hover { border-bottom-style: solid; border-bottom-width: 1px; border-color: black; background-color: #fff; }

您可能还想从以下位置删除边框半径：

.main-menu > li > a，.main-menu ul > li:first-child > a和.main-menu ul > li:last-child > a

您的子菜单对齐问题有点混乱。

您的问题来自左下方的负边距和下面列出的左侧定位（将它们全部更改为“0”）：

.main-menu ul {margin-left: -110px; /* change to 0 */}

.main-menu ul a {margin-left: 15%; /* change to 0 */}

.main-menu > li:hover > ul {left: 50%; /* change to 0 */}

纠正第3级子菜单对齐：

更新第3级菜单上的margin-left以匹配第2级下拉列表的宽度以及css箭头的额外空间。它目前是235px，应该是180px。

.main-menu ul ul {margin-left: 180px; /* 170px ( width of .main-menu ul a) + 10px (CSS Arrow - .main-menu ul ul::after {left:-10px})}

Radcliffe主题的下拉菜单

1 个答案: