css arrow

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        ul{margin:0; padding:0; list-style:none;background:#2D2E30; width:300px; min-height:250px;}
        ul li{float:left;border:0px solid red;margin-right:10px; margin-bottom:5px;background:#894724; border-radius:0px 19px 19px 0px; border-top:1px solid #C28F72;position:relative; }
        ul li a{display:inline-block; width:100%; padding:5px 40px 5px 5px;color:#F4D6B4}
        ul li:hover{box-shadow:3px 3px 3px black}
        ul li:after{background: none repeat scroll 0 0 #2d2e30;
border-radius: 500px;
content: "";
height: 10px;
left: 74%;
position: absolute;
top: 9px;
width: 10px;}
    </style>
</head>
<body>
    <ul>
        <li><a href="">This</a></li>
        <li><a href="">is </a></li>
        <li><a href="">a</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">This</a></li>
        <li><a href="">is </a></li>
        <li><a href="">a</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">This</a></li>
        <li><a href="">is </a></li>
        <li><a href="">a</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">This</a></li>
        <li><a href="">is </a></li>
        <li><a href="">a</a></li>
        <li><a href="">Menu</a></li>
    </ul>
</body>
</html>