css - Radcliffe 主题中的下拉菜单

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 { 背景:#ca2017 无重复滚动 0 0； 边框颜色:#ca2017； 颜色:#fff； }

类似于:

.main-menu ul a:hover { border-bottom-style: solid; 边框底部宽度:1px； 边框颜色:黑色； 背景色:#fff； }

您可能还想从以下位置移除边框半径:

.main-menu > li > a, .main-menu ul > li:first-child > a, and .main-menu ul > li:last-child > a

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

你的问题出在负左边距和下面列出的左边位置(全部改成“0”):

.main-menu ul {margin-left: -110px;/* 变为 0 */>

.main-menu ul a {margin-left: 15%;/* 变为 0 */>

.main-menu > li:hover > ul {left: 50%;/* 变为 0 */>

要更正第 3 级子菜单对齐方式:

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

.main-menu ul ul {margin-left: 180px;/* 170px(.main-menu ul a 的宽度)+ 10px(CSS 箭头 - .main-menu ul::after {left:-10px})}