CSS :hover to show and hide HTML tags

Question

Is there any reason why the (.nav-element>a:hover) in the code below works, but (.nav-element>a:hover .nav-dropdown1) does not respond? I have tried multiple ways to activate it, but is there something wrong with the syntax on the rule which does not work? Here is all the code I've got so far:

.nav-contaier {
clear:left;
background-color: #3B3B3B; 
}

.element-container {
background-color:#3B3B3B;
height: 4em;
width: 100%;
margin: auto;
}

.element-container>ul {
width: 80%;
height: 100%;
margin: auto;
display: flex;
}

.nav-element {
text-align: center;
flex: 0 0 20%;
color: white;
display: inline-block;
margin-left: 0;
margin-right: 0;
}

.nav-element>a {
line-height: 4em;
color: white;
height: 100%;
width: 100%;
display: block;
}

.nav-element>a:hover {
background-color: black;

}

.nav-dropdown1 {
display: block;
opacity: 0;
width: 80%;
height: 100%;
margin-left: 10%;
position: absolute;
height: 2em;
z-index: 10;
background-color: blue;
}

.nav-element>a:hover .nav-dropdown1 {
    opacity: 1;
    height: 3em;
 }

 //HTML FROM HERE

    <div class="nav-contaier">
        <nav class="element-container">
            <ul>
                <li class="nav-element"><a href="index.html">Home</a></li>
                <li class="nav-element"><a href="index.html">Menu</a></li>
                <li class="nav-element"><a href="index.html">Lorem</a></li>
                <li class="nav-element"><a href="index.html">Ipsum</a></li>
                <li class="nav-element"><a href="index.html">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="clearfix"></div>
    <div class="nav-dropdown1">

    </div>

The selector `.nav-element>a:hover .nav-dropdown1` does not match any of the elements in your HTML — Josef Engelfrost, Oct 21 '15 at 22:09
Please - read this. http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector - "There is currently no way to select the parent of an element in CSS." — max, Oct 21 '15 at 22:11
hmm, so is there any way to write this: .nav-element>a:hover .nav-dropdown1 ? — Adrian, Oct 21 '15 at 22:13
I am not trying to access a parent. If you read the code I added, you'll see that the a-tag I am referring to is a child element — Adrian, Oct 21 '15 at 22:16

score 0 · Accepted Answer · answered Oct 21 '15 at 22:19

Yes, there is a reason for this.

Using pseudo elements like this will only work on actual childs of the parent element.

The only solution at this point would be using JavaScript.

Just a little sidenote, from your HTML structure it seems that you're trying to make a nav-dropdown for every listitem. A better way to do this would be

<ul>
  <li><a>Foo</a> 
    <ul>
      <li><a>Foo dropdown</a></li>
    </ul>
  </li>
</ul>

There are tons of example on how to create a submenu, the advantages would be having a better HTML structure, and you'd actually be able to use the pseudo elements you've asked about.

That's what I was looking for. Thank you. – Adrian Oct 21 '15 at 22:24 — Adrian, Oct 21 '15 at 22:24

CSS :hover to show and hide HTML tags

1 Answers1