Wordpress菜单三角插入符号

Question

尝试在我的wordpress菜单中添加三角形插入符号。 从css三角形生成器得到了三角形，并简单地添加到：hover样式。 两个问题是：  1）它不保持原始尺寸（15px宽和10px长）并获得li的宽度，调整高度  2）只能看到部分高度。其余的隐藏在链接

下

#btmn ul li a:hover {
font-size: 14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 7.5px 0 7.5px;
border-color: #4f69bf transparent transparent transparent;
}

这里有实时链接 http://soloveich.com/pr4/

Answer 1

你可以使用另一个元素，或者你可以使用一个伪类：after - 并非所有的浏览器都会动画：after - 之后 - 这是主要的垮台 - 但是拥有一个完整的其他元素会更加语义化对于一个三角形，有些人会争辩。对定位的基本理解是关键。我试着留下好记。祝好运！ - jsfiddle

HTML

<nav class="special-nav">
    <ul class="menu">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
    </ul>
</nav>

CSS

.menu {
    float: left; /* or not */
    list-style: none;
    margin: 0; padding: 0;
    overflow: hidden; /* $shame use a clear fix instead */

    border: 1px solid rgba(0,0,0,.02); /* just so you can see */
}

.menu li {
    float: left;
}

.menu a {
    position: relative; /* so you can position things absolutely to its borders */
    display: block; /* to give the shape */
    padding: 1em;
    text-decoration: none;
}

.menu a:after {
    content: "\0020"; /* because you need something in this pseudo element for it to work */
    position: absolute; /* to position based on parent */
    top: 0;
    left: 50%; /* to center-ish */
    margin-left: -5px; /* basically half your triangle width  for further centering */

    /* triangle */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7.5px 0 7.5px;
    border-color: transparent;

    transition: all .3s linear; /* or not */
}

.menu a:hover:after {
    border-color: #4f69bf transparent transparent transparent;
    transition: all .1s linear;
}