垂直タブメニューを作成する

Question

次のタブメニューを作成する必要があります。いくつかのヒントを教えてもらえますか、フィドルに関するいくつかの例を見せてください。ご意見ありがとうございます。

EDIT ..私は、上部と下部の矢印

.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; 
 
}

<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>

Answer 1

私は純粋なCSS（無フィラー要素）を利用して参照問題が並んでトップとボトムの両方の矢印の作成になります...あなたを助けにはなりません国境。通常、ボーダー付き矢印の解決策は、:beforeと:after疑似クラスの両方を使用します。

あなたは矢印のいずれかを見送るために喜んでいる場合は、可能な解決策はここで見ることができます：

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

Answer 2

そのようなものを作成する必要がありますか？あなたにいくつかのコードを与えることは

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>