html - Absolute and relative positioning in menu

Question

We all have hard times with positioning absolute divs :S In my case its horizontal sub-menus with this css:

ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}

As you can see on the picture whole submenu moves to the left for 50% of the parents width... I tried everything and created just a bigger mess xD

So if anyone can help me out with this I will be very thankful :)

HTML:

<li class="page_item page-item-2 page_item_has_children">
    <a href="url">About</a>
    <ul class='children'>
        <li class="page_item page-item-39">
            <a href="url">About</a></li>
        <li class="page_item page-item-41">
            <a href="url">Contact us</a></li>
    </ul>
 </li>

I can't change html cause its wordpress theme :S

Answer 1

Update

ul.children {
  display: none;
}

ul.children li {
  position: relative;
  height: 60px;
  float: none;
}

li.page_item_has_children:hover > ul.children {
  display: inline;
}

li {
  float: left;
  list-style-type: none;
  width: 5em;
}

<ul>
  <li class="page_item page-item-2 page_item_has_children">
    <a href="url">About</a>
    <ul class='children'>
      <li class="page_item page-item-39">
        <a href="url">About</a></li>
      <li class="page_item page-item-41">
        <a href="url">Contact us</a></li>
    </ul>
  </li>
  
  <li class="page_item page-item-2 page_item_has_children">
    <a href="url">More info</a>
    <ul class='children'>
      <li class="page_item page-item-39">
        <a href="url">Item 1</a></li>
      <li class="page_item page-item-41">
        <a href="url">Item 2</a></li>
      <li class="page_item page-item-41">
        <a href="url">Item 3</a></li>
    </ul>
  </li>
</ul>