子要素が親要素の添付属性（ノッチ付きナビゲーション内）を継承しないようにするにはどうすればよいですか？

Question

私は、切り抜かれたナビゲーションを構築しています。ここでは、切り抜いた "三角形"がアクティブliのマーカーとして使用されています。

また、ホバーのドロップダウンの内容を明らかにするドロップダウンをしたいと思います。

ドロップダウンで「現在の」（アクティブ）liをホバーすると、ドロップダウンの内容に「切り取った」三角形が表示されます。

アクティブなliのドロップダウンコンテンツから「カットアウト」（ノッチ）の三角形を削除するにはどうすればよいですか？

。

codepenを表示し、 2ドロップダウン上をホバーしてください：あなたは、あなたのHで<a>タグを入れ子にしている

http://codepen.io/Goatsy/pen/pbvxKr

CSS

.nav .current a:before, 
.nav .current a:after{ 
    content:""; 
    display:block; 
    width:2em; /* Let's call this our magic number... */ 
    height:2em; /* ...our notch will be half this size. We define it in ems to scale it up with the text size. */ 
    position:absolute; 
    bottom:0; 
    left:50%; 
    margin-left:-1em; /* Half of our magic number. */ 
} 

HTML

 <li class="current"> 
     <div class="dropdown"> 
      <a class="dropbtn">Dropdown 2</a> 
      <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
      </div> 
     </div> 
     </li> 

Answer 1

.nav .current .dropdown-content a:before, 
.nav .current .dropdown-content a:after { display: none; } 

Answer 2

TMLコード。あなたのスタイルは、:beforeと:afterのすべての<a>タグを設定するように設定されています。スタイルを最初の<a>タグに限定する必要があります。

次でコード

.nav .current a:before { ... } 
.nav .current a:after { ... } 

を変更...

.nav .current > div > a:before { ... } 
.nav .current > div > a:after { ... } 

>は直接の子と何よりもにスタイルを追加しますと言います。