创建垂直选项卡菜单

Question

我需要创建以下标签菜单。你能给我一些提示或者展示一些关于小提琴的例子吗？谢谢你的任何建议。

编辑..我需要创建顶部和底部箭头

＆＃13;

＆＃13;

.tabs {
    list-style: none;
    }

.tabs a {
    display: block;
    width:110px;
    padding: 10px 25px 10px 15px;
    text-decoration: none;
    background-color: #dde2e4;
    color: #19305a;
    font-weight: bold;
    font-family: Lato;
    font-size: 13px; 
    border-bottom: 1px solid #ccc;
}

.tabs a.active {
    background: #fff;
    border-right: none;
}

＆＃13;

<ul class="tabs">
   <li><a href="#tab1">Process Data</a></li>
   <li><a href="#tab2" class="active">Requested Information</a></li>
   <li><a href="#tab3">General Structure</a></li>
   <li><a href="#tab4">Client Details</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这样的事情？给你一些代码对你没有帮助......

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

<ul>
  <li><a class="active" href="#process">Process Data</a></li>
  <li><a href="#request">Requested Information</a></li>
  <li><a href="#general">General Structure</a></li>
  <li><a href="#client">Client Details</a></li>
</ul>

Answer 2

我在使用纯CSS（并且没有填充元素）时看到的问题是在边框旁边创建顶部和底部箭头。通常，带边框的箭头的解决方案同时使用:before和:after伪类。

如果您愿意放弃其中一个箭头，可以在此处查看可能的解决方案：

http://codepen.io/rkieru/pen/grRqXq