如何在不弄乱所需风格的情况下移动箭头

Question

我正在修复网站，但我仍然坚持在wordpress中使用woo主题移动箭头。

我想要的是移动“服务”菜单项旁边（右侧）的箭头。 我试图调整填充，但它会使菜单项的布局大小变小，并且不符合所需的输出

我还试图找到箭头的背景图像，但似乎没有附加图像。

该网站是：http://67.222.16.144/~chrismol/

问：如何在不弄乱所需风格的情况下移动箭头？

Answer 1

您必须从!important

中删除#navigation a

Answer 2

#navigation .nav li.parent > a:after {
    content: "";
    display: block;
    border: 0.3em solid #ccc;
    border-color: #ccc transparent transparent transparent;
    position: absolute;
    top: 36%;
    right: 1px;
}

Answer 3

您找不到背景图片，因为没有任何背景图片，箭头是使用CSS的border属性和:after选择器制作的。此代码创建箭头：

#navigation .nav li.parent > a:after {
    content: "";
    display: block;
    border: 0.3em solid #ccc;
    border-color: #ccc transparent transparent transparent;
    position: absolute;
    top: 48%;
    right: .8751em;
}

要显示服务菜单项旁边的箭头，您首先应将top:48%更改为top:34%，接下来应添加以下CSS规则：

#menu-item-1987 a{
    padding-right:32px !important;
}

如果您有任何问题请告诉我，这个答案如何满足您的期望。 ：）