creating a dropdown menu when focus

Question

can you help me? i want to create a dropdown menu when it focus pure css no jquery

HTML

<div class="pp-nav-menu">
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="">Furoms</a></li>

                <li tabindex="1" class="pp-dropdown-toggle">
                    <a href="#">Blogs</a>
                    <ul class="pp-dropdown">
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Application</a></li>
                        <li><a href="#">Board</a></li>
                        <li><a href="#">Options</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>

CSS

.pp-dropdown-toggle {
  position: relative;
 }

.pp-dropdown-toggle .pp-dropdown {
    visibility: hidden;
    position: absolute;
    top:100%;
}

.pp-dropdown-toggle:focus ul.pp-dropdown {
    visibility: visible;
}

this code works in Chrome and ie but in mozilla its not work can you help me for this problem

Answer 1

Simply change your CSS selector to:

Demo Fiddle

.pp-dropdown-toggle:focus ul.pp-dropdown, .pp-dropdown-toggle a:focus + ul.pp-dropdown {
    visibility: visible;
}

Answer 2

I would prefer to do like this :

.pp-dropdown-toggle {
  position: relative;
 }

.pp-dropdown-toggle .pp-dropdown {
    visibility: hidden;
    position: absolute;
    top:100%;
}
/* if you also need hover */
/* it is behind the css3, so you can not to worry about cross browser compatibility  */
.pp-dropdown-toggle:focus > ul.pp-dropdown, .pp-dropdown-toggle:hover > ul.pp-dropdown {
    visibility: visible;
}
/* answer for your question in the comments */
.pp-dropdown-toggle:not(:focus) > ul.pp-dropdown, .pp-dropdown-toggle:not(:hover) > ul.pp-dropdown {
    visibility: hidden;
}

If it didn't help try to target not to li element but to a link, like this .