Goatsy Goatsy - 1 year ago 65
CSS Question

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

I am building a notched navigation, in which a triangle "cut out" is used as a marker for the active li.

I would also like to have dropdowns that reveal dropdown content on hover.

When hovering over a "current" (active) li with a dropdown, the dropdown content displays the triangle "cut out".

How do I remove the triangle "cut out" (notch) from the dropdown content of the active li?


Please view codepen and hover over Dropdown 2:



.nav .current a:before,
.nav .current a:after{
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. */
margin-left:-1em; /* Half of our magic number. */


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

Answer Source
.nav .current .dropdown-content a:before,
.nav .current .dropdown-content a:after { display: none; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download