Having trouble with making unusual shaped hover on first and last child - html

Question

Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</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;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#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

The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle

Answer 2

Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?