css - How do I prevent a child element from inheriting parent element's attached attribute (in notched navigation)? -

i building notched navigation, in triangle "cut out" used marker active li.

i have dropdowns reveal dropdown content on hover.

when hovering on "current" (active) li dropdown, dropdown content displays triangle "cut out".

how remove triangle "cut out" (notch) dropdown content of active li?

.

please view codepen , hover on 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 our magic number... */     height:2em; /* ...our notch half size. define in ems scale 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> 

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