大家多指教，没有贴图，用css做的圆角

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>垂直导航菜单</title>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            height: 50px;
            border-bottom: 5px solid orangered;
            padding-left: 50px;

        }

        li {
            float: left;
        }


        a {
            text-decoration: none;
            height: 30px;
            line-height: 30px;
            background: silver;
            padding: 1px 15px;
            /*设置为块级元素可以自行设置宽高了*/
 display: block;
            text-align: center;
            margin-top: 18px;
        }

        a:hover {
            /*鼠标移动到超链接时的背景颜色*/
 background: lawngreen;
            /*鼠标移动到超链接时的文字颜色*/
 color: black;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
    </style>
</head>
<body>

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻摘要</a></li>
    <li><a href="#">热点时事</a></li>
    <li><a href="#">娱乐八卦</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

</body>
</html>