html - appear on hover and stay visible

Question

First time asking a question here...

I'm making a drop down menu with some effects that I got from cssdeck.com. Basically the nav is from one source, and the sub menu from another. I've mixed two cssdeck.com source to make it look like one.

So far, I got the sub menu to appear on hover, but can't make it stay visible so I can click on the sub menu.

The code is pretty long and complicated and I'm not exactly sure how to show/share it for you to check...

How do I make "A" to appear on "B":hover and make "A" stay visible when I move the pointer to "A" to select something on "A"??????

<nav>
    <div class="nav_main ph-dot-nav"> 
        <a href="#">Home</a>
        <a href="#">About
            <div id="sub_about">
                <ul>
                    <li class="li_first"><a href="#">????</a> </li>
                    <li><a href="#">?????</a> </li>
                    <li class="li_last"><a href="#">????</a></li>
                </ul>
            </div>
        </a>
         <a href="#">Services</a>
         <a href="#">Portfolio</a>
         <a href="#">Partners</a>
         <a href="#">Contact</a>
        <div class="effect"></div>
    </div>
</nav>

Fiddle Demo here

Answer 1

You can solve this, if you also show the submenu if you hover on it. See https://jsfiddle.net/7xfrod2s/

#sub_about:hover {
   visibility: visible;
}

Also I moved the visible: hidden style to the parents tag of ul (#sub_about).

Maybe you need an other :before tag so that there is no gap between the header and the submenu (a curser-bridge so to say) ;)