vertical menu where submenu flys out and sticks to top of page

I'm building a vertical menu, and want the sub-menu items to fly out on hover. I have that working. However, I want the submenu to always stick to the top of the page. I've added the position: absolute property to my css, but it's not working. Here is what I have now: https://jsfiddle.net/bdsr4ypo/

The code is below, too.

I found a jsfiddle which does exactly what I want: http://jsfiddle.net/framj00/ykn2dyf0/ but I can't get my menu to follow this style after spending two hours changing the CSS.

Any help would be greatly appreciated.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
      #nav .opener {
        display: none;
      }
      ul li{
        list-style-type: none;
        list-style-image: none;
      }
       #nav {
        width: 600px;
        position: fixed;
        top: 0;
        right: 0;
        padding-top: 0px;
        z-index: 9999;
        height: 100%;
      }
       #nav ul {
        background: #4f626b;
        width: 300px;
        height: 100%;
        position: absolute;
        right: 0px;
        margin-top: 0px;
        z-index: 999999;
      }
      /* Hover dropdown */
       #nav ul li {
        position: relative;
      }
       #nav ul li a{
        color:#fff;
      }
      #nav ul li ul {
        display: none;
      }
      #nav ul li:hover ul {
        display: block;
        top: 0;
        left: -380px;
        height:100%;
      }
      </style>
    </head>
    <body>
      <!-- nav -->
            <div id="nav" class="open-close">
                <nav role="navigation">
                  <ul id="navo" class="menu nav navbar-nav">
                    <li class="button"><span class="nolink">Menu</span></li>
                    <li class="button"><a href="#">title one</a>
                      <ul class="flyout-menu">
                        <li><a href="#">section one sub-title one</a></li>
                        <li><a href="#">section one sub-title two</a></li>
                        <li><a href="#">section one sub-title three</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title two </a>
                      <ul class="flyout-menu">
                        <li><a href="#">section 2 sub-title one</a></li>
                        <li><a href="#">section 2 sub-title two</a></li>
                        <li><a href="#">section 2 sub-title three</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title three</a>
                      <ul class="flyout-menu">
                        <li><a href="#">section 3 sub-title one</a></li>
                        <li><a href="#">section 3 sub-title two</a></li>
                        <li><a href="#">section 3 sub-title three</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title four</a>
                      <ul class="flyout-menu">
                        <li><a href="#">sub-title one</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title five</a>
                      <ul class="flyout-menu">
                        <li><a href="#">section five sub-title one</a></li>
                        <li><a href="#">section five sub-title two</a></li>
                        <li><a href="#">section five sub-title three</a></li>
                      </ul>
                    </li>
                  </ul>
                </nav>
             </div>
    </body>
    </html>

Solution

i've update your fiddle

is this what you wanted to happen?

#nav .opener {
  display: none;
}

ul li {
  list-style-type: none;
  list-style-image: none;
}

#nav {
  width: 600px;
  position: fixed;
  top: 0;
  right: 0;
  padding-top: 0px;
  z-index: 9999;
  height: 100%;
}

#nav ul {
  background: #4f626b;
  width: 300px;
  height: 100%;
  position: absolute;
  right: 0px;
  margin-top: 0px;
  z-index: 999999;
  padding: 0;
}


/* Hover dropdown */

#nav ul li {
  /* position: relative; */ // removed
  padding-left: 40px; //added
}

#nav ul li a {
  color: #fff;
}

#nav ul li ul {
  display: none;
}

#nav ul li:hover ul {
  display: block;
  top: 0;
  left: -100%; //changed to -100%
  height: auto; //changed to auto
}