I'm currently working on a navigation menu, but I've encountered some bugs and I'm struggling to fine-tune it completely. Here are the issues I'm facing, and any help or solutions would be greatly appreciated.

1. The menu items (About Me | Portfolio | Blog | Contact Me) are being triggered too easily, even with a quick hover. How can I delay the trigger (mouseenter) for a few milliseconds (say 200ms) so that the menu is only activated if the user hovers over it for at least 200ms, and not unintentionally?

2. The submenus (Portfolio One | Portfolio Two) sometimes disappear when their parent is hovered over, leaving the other submenu hanging. I suspect this is due to the easily triggered parent menu hover affecting its children. I need a solution to prevent the submenus from fading in and out rapidly and causing clutter.

Thank you in advance for any help!

Here is the fiddle link: https://jsfiddle.net/Herza/ut5nLdpa/

Here is the code snippet:

--------------HTML--------------------

<nav id="menu">
    <ul>
        <li>
            <a href="#">
                <p>About Me</p>
                <div></div>
            </a>
        </li><!--
     --><li id="portfolio" >
            <a>
                <p>Portfolio</p>
                <div></div>
            </a>
            <ul>
                <li id="one-port">
                    <a href="#">Portfolio One</a>
                </li>
                <li id="two-port">
                    <a href="#" >Portfolio Two</a>
                </li>
            </ul>
        </li><!--
     --><li>
            <a href="#" >
                <p>Blog</p>
                <div></div>
            </a>
        </li><!--
     --><li>
            <a href="#" >
                <p>Contact Me</p>
                <div></div>
            </a>
        </li>
    <ul>    
</nav>

---------------CSS-----------------

nav#menu .current {background-color: black; color: white;}
nav#menu > ul {margin: 0; padding: 0;}
nav#menu > ul > li {display: inline-block; list-style: none; position: relative;}
nav#menu > ul > li > a {text-decoration: none; display: block; padding: 0; height:  62px; width: 130px; text-align: center; font-family: "roboto-light"; line-height: 55px; color: black; font-size: 16px; cursor: pointer; overflow: hidden;}
nav#menu > ul > li > a > p {display: block; width: 100%; height: 62px; margin: 0; padding: 0; background-color: green;}
nav#menu > ul > li > a > div {display: block; width: 100%; height: 62px; margin: 0; padding: 0; background-color: black; background-image: url(https://lh3.googleusercontent.com/3mJFQFK6QV2X2RZHfDGruGeelc7R4KhigZliqmQKZQqRMdm13ZOR2ZPtBf3VMyagahrzA4gT3ZcB4VU=w1342-h479); background-size: auto; background-repeat: no-repeat; background-position: center center;}
nav#menu > ul > li > ul {position: absolute; left: 0px; padding: 0px; margin: 0px; width: 200px; height: 0px; background-color: white; display: block; }
nav#menu > ul > li > ul > li {list-style: none}
nav#menu > ul > li > ul > li > a {display: block; padding: 15px 10px 15px 35px; background-color: white; color: black; text-decoration: none; font-family: "roboto-light";  font-size: 16px; background-color: blue;}
nav#menu > ul > li > ul > li { position: absolute; width: 100%; border: 0; left: 100px; display: none;}
nav#menu > ul > li > ul > li#one-port {top: 0px; z-index: 36;}
nav#menu > ul > li > ul > li#two-port {top: 49px; z-index: 35;}
nav#menu > ul > li > ul > li#one-port > a {border-bottom: 1px solid black;}

-------------------- Jquery --------------------------------

$(document).ready(function(){

    $("nav > ul > li").mouseenter(function(){
        $(this).children("a").children("p").animate({margin: "-62 0 0 0"},300);
    })
    $("nav > ul > li").mouseleave(function(){
        $(this).children("a").children("p").animate({margin: "0 0 0 0"},300);
    })

    $("nav > ul > li#portfolio").mouseenter(function(){
        $(this).children("ul").contents().clearQueue(); 
        $(this).children("ul").children("li#one-port").delay(0).queue(function(){
            $(this).animate({left: "0"},{queue: false, duration: 400})
            $(this).fadeIn({queue: false, duration: 400});
            $(this).dequeue();
        })
        $(this).children("ul").children("li#two-port").delay(250).queue(function(){
            $(this).animate({left: "0"},{queue: false, duration: 400})
            $(this).fadeIn({queue: false, duration: 400});
            $(this).dequeue();
        })
    })

    $("nav > ul > li#portfolio").mouseleave(function(){ 
        $(this).children("ul").contents().clearQueue();                                         
        $(this).children("ul").children("li#one-port").delay(0).queue(function(){
            $(this).animate({left: "100"},{queue: false, duration: 400})
            $(this).fadeOut({queue: false});
            $(this).dequeue();
        })
        $(this).children("ul").children("li#two-port").delay(250).queue(function(){
            $(this).animate({left: "100"},{queue: false, duration: 400})
            $(this).fadeOut({queue: false});
            $(this).dequeue();
        })      
    })
})