CSSトライアングルホバー国境問題

Question

次のコード

<ul id="leftNavUl"> 
    <li><a href="#">Colors</a></li> 
    <li><a href="#">Typography</a></li> 
    <li><a href="#">Buttons</a></li> 
    <li><a href="#">Main Navigation</a></li> 
    <li><a href="#">Alerts</a></li> 
    <li><a href="#">Data Tables</a></li> 
</ul> 

を使用して、私は右に、各境界線の終わりに三角/矢印を表示するにはホバーをしたいと思います。 Iは、ホバー機能するが、次のコード

#leftNavUl li:hover{ 
    display: inline-block;lock; 
    position: relative; 
    background: #97cce9; 
    padding: 15px; width:100%;} 

#leftNavUl li:after{ 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 100%; 
    top: 0%; 
    margin-top: -10px; 
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 40px solid transparent; 
    border-left: 30px solid #97cce9; 
} 

を実装している

、DIVの外側に余分な三角/矢印見えるがあります。

Answer 1

あなただけのホバー状態の要素の後にtriger必要があります。表示：

#leftNavUl li:hover:after

同様

そして、あなたはあなたの最初のクラスにタイプミスを得たcarfuleインラインブロック; ロック;

以下

を参照してくださいコード：スタックオーバーフローへhttps://jsfiddle.net/d6h0xtup/2/