Goatsy Goatsy - 6 months ago 9
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:

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
.nav .current .dropdown-content a:before,
.nav .current .dropdown-content a:after { display: none; }
Comments