Hello there, just wanted to mention that I am new to this site so please bear with me if I fumble a bit. I'm sure I'll improve as I gain more experience.
My aim is to create a vertical navigation menu using only HTML/CSS that can scroll and expand to the right for additional subjects. I have put together the basic structure, but I am facing issues with the scrolling function and a few other elements. I've managed to get the main navigation to scroll, but cannot figure out how to keep the flyout working properly. Below is the code I have written so far along with a rough sketch of how the navigation should function.
<!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;
}
... (rest of CSS goes here) ...
![Photo mock up from client][1]
[1]: https://i.sstatic.net/uIR1x.jpg