想实现的悬停效果如上图所示。
自己写的代码如下面所示：
<!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); }
实际实现的悬停效果如下图所示：
请问如何应该调整悬停的时候白色方块的高度，然后再在白色方块底下加一个小三角。求高人指点。
