CSS how to make div visible on focus not working

40 views
0

I am trying to make div element visible on focus but it is not working. If i change focus to hover it works

JSFIDDLE https://jsfiddle.net/9bo81jyy/8/

HTML

<div class="test">
  <nav class="nav">
    <ul class="navtabs">
      <li>
        <a href="showMe/1">
          <div class= "inside">
            <div tabindex="0" class="delete">
              <button tabindex="-1" class="fa-times-circle"> </button>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </nav>
</div>

CSS

.nav > ul.navtabs > li > a > div:focus .delete{
  display: inline !important;
}
.delete{
  display: none;
}