Issue with CSS/HTML sub level navigation

Make sure that you menu item (the <a> tag) goes all the way to the bottom of your menu, so when moving your mouse it won't actually leave the area of hovering.

add this to you .menu a css:

.menu a {
    font: normal 14px Helvetica, sans-serif;
    padding-left:5px;
    padding-top:5px;
    padding-right:5px;
    float:left;
    color:black;
    height:30px; // this here
}

See in this JSFiddle

I would avoid using the answer which suggests wrapping the submenu in the <a> element. This poses an accessibility issue where any excess space not covered by a child <a> would link to the original menu item. Any borders, margins, or non-linked content within the submenu would instead link to the parent page. This is simply not what the user expects and will be confusing if they make a stray-click.

I will explain the issue with your current solution:

.menu-item:hover ul {
    display:block;
}

You are hovering over the <li class="menu-item"> element, which contains the link <a> and the submenu <ul class="sub-menu"> side-by-side (default of WordPress wp_list_pages()).

This is correct, however, since your <a> and <ul> elements within the parent are positioned using float and absolute positioning, the height of the menu item is not known. This is why moving your mouse below the <a> element closes the menu, there is nothing there but the background of the <ul>. That's how the system works, and that's what you need to learn before you can understand the reference you provided.

You can fix this with any of these options:

1. Define a height for the <li> directly
2. Clear the float using CSS: clear: left - which will calculate the height of sibling elements which were floated to the left.
3. Stop using floats and instead use: display: inline-block
4. Move the submenu up vertically so that it touches the <a> element. Due to font differences between browsers, this may not be reliable unless the <a> element has a fixed height as well.

Here is a solution that combines #2 and #3. Floats are used for the top-level menu items simply to remove the natural spacing between inline elements. However, the majority of the layout relies on display: inline-block. Using the child selector > we can determine the difference between top level elements and those child elements within the sub-menu. There are some colors and padding included which show you what you will want to edit.

ul.menu > li.menu-item {
    position: relative;
    float: left;
}
ul.menu > li.menu-item > a {
    display: inline-block;
    padding: 3px 5px;
    background: #dfdfdf;
}
.clear { clear: both; }

The key to this solution is to add an <li class="clear"></li>. If you cannot modify the HTML directly, you could try a pseudo-element:

ul.menu > li.menu-item:last-child:after { content: ' '; clear: both; }