悬停效果 白色方块加小三角。

图片说明
想实现的悬停效果如上图所示。

自己写的代码如下面所示：
<!DOCTYPE html>



菜鸟教程(runoob.com) div{ border:2px solid white; height: 50px; border-radius:20px ; background:url(http://img4.imgtn.bdimg.com/it/u=2365445168,3406653750&fm=27&gp=0.jpg); } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-radius:3px; } li { margin-top:9px; float: left; border-right: 1px solid white; height:35px; } li a { display: inline-block; color: white; text-align: center; padding: 14px 9px; line-height:3px; text-decoration: none; } li: hover{ background-color:rgba(255,255,255,0.5); transition-duration: 0s;} li a:hover { background-color:rgba(255,255,255,0.5); }



实际实现的悬停效果如下图所示：
图片说明

请问如何应该调整悬停的时候白色方块的高度，然后再在白色方块底下加一个小三角。求高人指点。

分成七个小块，每个悬停都是一个div，只显示左右两个边界，要在加一个小三角个人感觉要用js实现了

用定位啊，或者伪元素

.bannerC .banner-nav .bannerNav li {
text-align: center;
float: left;
position: relative;
}

.bannerC .banner-nav .bannerNav .current {
background-color: #c00;
border-radius: 3px;
}

.bannerC .banner-nav .bannerNav li a {
float: left;
padding: 0 12px;
color: #fff;
}

.bannerC .banner-nav .bannerNav li .cur {
position: absolute;
width: 16px;
height: 7px;
background: url("../index-img/navsjt.gif") no-repeat;
left: 50%;
margin-left: -8px;
bottom: -10px;
z-index: 3;
}

以前自己做的一个项目的部分代码，

li a {
display:block;

position: relative;

}
li a:hover:after {
content: "";
position: absolute;
bottom: 10px;
left: 40%;//自己调整
border-bottom: 10px solid yellow;
** border-left: 7px solid transparent;**
border-right: 7px solid transparent;
}