html - 无法在第一个和最后一个 child 上进行异常形状的悬停

Question

查看 JSfiddle 显示我在做什么:http://jsfiddle.net/Amp3rsand/FPj3s/1/

HTML:

<ul id="navigation">
    <li><a href="#">BLAH</a></li>
    <li><a href="#">MORE <br /> BLAH</a></li>
    <li><a href="#">STILL <br /> MORE</a></li>
    <li><a href="#">YADDA <br /> YADDA</a></li>
    <li><a href="#">ETC ETC <br /> ETC ETC</a></li>
    <li><a href="#">FINISH</a></li>
</ul>

CSS:

body {
    font-size: 12px;}
}
#navigation {
    width: 600px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 25px;
}

#navigation li {
    list-style-type:none;
    width: 94px;
    height: 40px;
    display: block;
    float: left;
    margin: 0 5px 0 0;
    text-align: center;
    font-weight: bold;
    background: lightgrey;
}

#navigation li:first-child {
    border-top: 40px solid lightgrey;
    border-left: 25px solid transparent;
    height: 0;
    width: 70px;
    background: none;
}

#navigation li:first-child a {
    position: relative;
    top: -35px;
    right: 0px
}

#navigation li:last-child {
    border-top: 40px solid lightgrey;
    border-right: 25px solid transparent;
    height: 0;
    width: 70px;
    background: none;
}

#navigation li:last-child a {
    position: relative;
    top: -35px;
    left: 5px;
}
#navigation li:last-child a:hover {
    top: -35px;
    left: 5px;
}

#navigation li a {
    display: block;
    height: 40px;
    text-decoration: none;
    color:#000;
}

#navigation li a:hover {
    background: grey;
}

浅灰色形状是我希望悬停的样子。只有第一个和最后一个 child 需要看起来不同，但我不确定如何在悬停时弄乱边框而不破坏布局。由于边界恶作剧，我不得不移动第一个和最后一个“a”元素，现在我陷入困境。 你有什么建议？

---

编辑: 我刚刚意识到我可以这样做来改变悬停位的形状，但链接位置仍然造成麻烦

#navigation li:last-child a:hover {
    border-top: 40px solid grey;
    border-right: 25px solid transparent;
    height: 0;
    width: 70px;
    background: none;
}

See it live here on JS Fiddle

Answer 1

您要更改的属性属于 <li>元素因此以列表项悬停状态为目标并更改背景和边框颜色

#navigation li:hover {
    background: grey;
}

#navigation li:first-child:hover,
#navigation li:last-child:hover{
    background: none;
    border-top-color: grey;
}

<强> Updated fiddle