Как предотвратить прикрепление дочернего элемента к наследуемому атрибуту родительского элемента (в надрезанной навигации)?

Question

Я строю надрезанную навигацию, в которой треугольник «вырезанный» используется как маркер активного li.

Я также хотел бы иметь выпадающие списки, раскрывающие раскрывающийся контент при наведении указателя мыши.

При наведении указателя мыши на «текущий» (активный) li с выпадающим списком выпадающий контент отображает треугольник «cut out».

Как удалить треугольник «вырезать» (вырезать) из выпадающего содержимого активного ли?

.

Пожалуйста осмотрите codepen и наведите курсор на Dropdown 2:

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

Вы вложенные <a> тегов в вашем H TML-код. Ваши стили настроены так, чтобы установить все теги <a> с :before и :after. Вам необходимо ограничить стили первым тегом <a>.

Изменить код

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

следующий ...

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

в > говорит только добавить стили к немедленному ребенку и больше ничего.