嘿，伙计们，我从来没有使用过这个网站，所以对菜鸟的东西感到抱歉。我相信我会随着我的进步而变得更好。
目标是创建一个（仅限 html/css）垂直导航菜单，该菜单将具有滚动功能并向右飞出以扩展更多主题。我已经建立了基础，但卷轴（以及其他一些东西）一直在躲避我。我已经能够在主导航上使用滚动条，但不能让我保持飞行正常工作。我已经包含了到目前为止的代码以及导航应该如何工作的模型。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>module3</title>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a {
color:inherit;
text-decoration: none;
}
ul#navmenu a:hover{
color: #FFF;
}
body
{
font-size: 15px;
font-family: "Helvetica Neue 25 Ultra Light", Arial;
text-transform: uppercase;
padding: 50px;
color: #535353;
}
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
}
ul#navmenu li {
/*outline: 1px solid red*/
width: 310px;
text-align: center;
position: relative;
border-bottom: 0.12em dotted #ABB0B0;
text-align: left;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 300px;
height: 45px;
line-height: 45px;
background-color: #E5E8E9;
padding-left: 10px;
}
ul#navmenu .sub1 li {
}
ul#navmenu .su1 a {
margin-top: 5px;
}
ul#navmenu .sub2 a {
margin-left: 10px;
width: 500px;
}
ul#navmenu li:hover > a {
background-color: #0098ba;
}
ul#navmenu li:hover a:hover {
background-color: #0098ba;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 45px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: -92px;
left: 300px;
width: 800px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.sub2 {
text-transform: capitalize;
font-size: 14px;
}
.button {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: #f4f4e8;
border: solid 1px #c7c7c7;
font-size: 14px;
text-transform: uppercase;
color: #006792;
cursor: pointer;
-webkit-appearance: button;
box-shadow: inset 0 -1px #c7c7c7;
}
.triangleTop {
position:relative;
left: 270px;
top: 30px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid #0098ba;
border-left: 10px solid transparent;
z-index: 2;
}
/* I will fix this business soon */
strong {font-size: 12px;}
</style>
<body>
<div class="triangleTop"></div>
<ul id="navmenu">
<li><a>lorem ipsum dolor ari</a>
<ul class="sub1">
<li><a href="#">litigation</a></li>
<li><a href="#">payroll</a></li>
<li><a href="#">pensions/benefits</a>
<ul class="sub2">
<li><a href="#">PENSION AND BENEFITS<strong>HOME</strong></a></li>
<li><a href="#"><span style="font-weight:bold;">SEARCH:</span> Law</a></li>
<li><a href="#"><span style="font-weight:bold;">SEARCH:</span> Intellectual property</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and Saunders</a></li>
<li><a href="#">Folk on the Delaware General Corporation Law - Welch, Turezyn and </a></li>
</ul>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">product liability and insurance</a></li>
<li><a href="#">proerty and construciton law</a></li>
<li><a href="#">Securities and corporate</a></li>
<li><a href="#">tax law</a></li>
<li><a href="#">transportation</a></li>
<a class="button">Manage content collections</a>
</ul>
</li>
</body>
</html>
![Photo mock up from client][1]
[1]: http://i.stack.imgur.com/uIR1x.jpg