Help polishing off hide/show menu

Help polishing off hide/show menu


http://www.gnomonschool.com/menu_prototype/
In the top right is a "More About Gnomon" link, which reveals a UL
menu on hover. I am not a Javascript person at all really, so just
getting it this far has been a struggle. I ended up just using the
code from this demo:
http://www.ihwy.com/labs/demos/Current/image-hover-menu.aspx
It's working fine but to polish this off I need two more things-
1.) The :hover state of my #moreButton link should stay in its :hover
state not when the cursor is removed from it, but when the cursor is
removed from the #moreMenu UL. This way the link mouseover appears to
be part of the popup menu and not part of the link.
2.) The #moreMenu position should be aligned so its right hand side is
along the right hand side of the #moreButton link. I am faking this
right now by just using margin-left on #moreMenu to push the menu so
it is aligned visually, but this doesn't work perfectly as differences
in type rendering across browsers breaks the visual alignment just
slightly. Ideally I should be using JS (I think) so the elements are
always aligned relative to eachother.
I really have no idea how to put these two things into action and
would really appreciate any assistance offered. Thanks!