This is my test page:
Script to open and close the menu '#contact':
Here is the markup of the upper-right navigation area:
<h1>PARTNERS DESIGN<span class="smallhead">, INC.</span> / <a id="contactbtn">MAKE CONTACT</a><div id="contact">
<a id="contacthover1" href="mailto:firstname.lastname@example.org">EMAIL</a>
<a id="contacthover2" href="https://www.facebook.com/pages/Partners-Design-Inc/62221992069?fref=ts" target="_blank">FACEBOOK</a>
The only problem is that the menu doesn't stay open when you move the mouse down over the menu itself. I tried some rather complicated checks against both '#contactbtn' and '#contact', but then had issues because a mouseover on one of the <a> links within '#contact' was counting as a mouseout of '#contact'. I was also running into browser inconsistencies in that same regard, and I think my code was overly complex.
There must be some relatively simple way to do an if/then such as:
If 'mouseout' on both '#contactbtn' and '#contact' (plus its child elements) = slideUp menu?
Would appreciate any advice. Thank you!