sprucegoose sprucegoose - 8 days ago 7
CSS Question

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>

GvM GvM
Answer

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
}