Question

我在垂直子导航栏上有一个css箭头：http://rumble.com.au/technology/ 但由于某种原因，我无法让它正确显示。它应该在右侧的外侧，但正如您所看到的，其中一半已被切断。如果我向右移动箭头它会消失。如何让它出现在右侧？

我希望它可以在此页面上工作：http://cssarrowplease.com/

由于

Answer 1

在您的css .z-tabs li:hover:after, .z-tabs li:focus:after, .z-tabs li.z-active:after班级的电话号码389中更改left:95% to left: 93%

Answer 2

我会做没有彩色背景的LI项目，只有箭头，在LI内部，A元素将具有适合箭头的边距。

颜色背景将在A元素中。

在此示例中，您应将背景放在灰色背景和虚线边框之间：

ul {
    list-style: none;
}

ul li {
    width: 120px;
    border: dotted 1px gray;
    line-height: 25px;
    margin-bottom: 5px;
}
ul li a{
    width: 100px;
    margin-right: 5px;
    background-color: #ccc;
    line-height: 25px;
    display: block;
}

我使用了部分HTML

<ul class="z-tabs-nav z-tabs-desktop">
    <li class="z-tab z-first z-active" data-link="tab1" style=""><a class="z-link">Cloud</a>
    </li>
    <li class="z-tab" data-link="tab2" style=""><a class="z-link">Onelogin</a>
    </li>
    <li class="z-tab" data-link="tab3" style=""><a class="z-link">Nimble CRM</a>
    </li>
    <li class="z-tab z-last" data-link="tab4" style=""><a class="z-link">Service Now</a>
    </li>
</ul>

http://jsfiddle.net/7pex9/

CSS箭头使用：消失后问题

2 个答案: