Drop down menu position

Hi all

I have a demo here - http://www.ttmt.org.uk/drop/

It’s a simple <ul> list naviagtion. Buttons 2 and 3 have a drop down.

The drop down menus appear on the right of the button below the next button.

Why dose the drop down appear here. How can I get the drop down to appear under the when you roll over it.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">

  <!--css-->

  <style type="text/css">

    *{
      margin:0;
      padding:0;
    }
    body{
      background:#eee;
      font-family:Helvetica, sans-serif;
    }

    nav{
      margin:50px;
    }
    nav ul li{
      display:inline;
      position:relative;
    }
    nav ul li a{
      float:left;
      display:block;
      padding:20px;
      background:#fff;
      text-decoration:none;
      margin:0 2px 0 0;
    }
    nav ul li ul{
      position:absolute;
      left:-999em;
    }
    nav ul li:hover ul{
      left:auto;
      left:-120px;
      top:58px;
    }
    nav ul li ul li a{
      background:red;
      float:none;
      color:#fff;
      margin:0 0 2px 0;
    }

  </style>



  <title>Title of the document</title>
  </head>

<body>

  <nav>
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two ></a>
        <ul>
          <li><a href="#">Two/One</a></li>
          <li><a href="#">Two/Two</a></li>
          <li><a href="#">Two/Three</a></li>
          <li><a href="#">Two/Four</a></li>
        </ul>
      </li>
      <li><a href="#">Three ></a>
        <ul>
          <li><a href="#">Three/One</a></li>
          <li><a href="#">Three/Two</a></li>
          <li><a href="#">Three/Three</a></li>
        </ul>
      </li>
      <li><a href="#">Four</a></li>
    </ul>
  </nav>


</body>

</html>

Setting the LIs to inline isn’t helping you. Try this instead:

nav ul > li {
display: block;
position: relative;
float: left;
}