Я создаю вертикальное меню и хочу, чтобы элементы подменю вылетали при наведении. у меня так работает. Однако я хочу, чтобы подменю всегда было в верхней части страницы. Я добавил свойство position: absolute в свой css, но оно не работает. Вот что у меня есть сейчас: https://jsfiddle.net/bdsr4ypo/
Код тоже ниже.
Я нашел jsfiddle, который делает именно то, что я хочу: https://jsfiddle.net/framj00/ykn2dyf0/ но я не могу заставить свое меню следовать этому стилю, потратив два часа на изменение CSS.
Любая помощь будет принята с благодарностью.
<!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>
