I am in the process of creating a navigation menu with dropdown menus, which are working correctly. Now, I would like to add another sub-menu drop down inside dropdown 1, but I am having trouble getting it to function properly. How can I make Sub Menu 1 act like dropdown 1? I need to create a nested dropdown, essentially a 3 level dropdown.
Thank you for your assistance.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Drop-Down Navigation using HTML & CSS</title>
<style type="text/css">
* {padding:0; margin:0;}
a {text-decoration: none;}
li {list-style: none;}
/* Navigation STyling */
.main-nav {width: 250px; background: #033677;}
.main-nav a {
text-transform: uppercase;
letter-spacing: .2em;
color: #FFF;
display: block;
padding: 10px 0 10px 20px;
border-bottom: 1px dotted red;
}
.main-nav a:hover {background: #C71E54;}
.sub-nav-ul ul {display: none;}
.sub-nav-ul li:hover ul {display: block;}
.main-nav-ul ul {display: none;}
.main-nav-ul li:hover ul {display: block;}
.main-nav-ul ul a:before {
content: '\203A';
margin-right: 20px;
}
.main-nav .sub-arrow:after {
content: '\203A';
float: right;
margin-right: 20px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.main-nav li:hover .sub-arrow:after {
content: '\2039';
}
</style>
</head>
<body>
<nav class="main-nav">
<ul class="main-nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
<ul>
<ul class="sub-nav-ul">
<li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
<ul>
<li><a href="#">Sub Item 1X</a></li>
<li><a href="#">Sub Item 2X</a></li>
<li><a href="#">Sub Item 3X</a></li>
<li><a href="#">Sub Item 4X</a></li>
</ul>
</li>
</ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
<li><a href="#">LINK 1</a></li>
<li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
<ul>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
</ul></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
</ul>
</nav>
</body>
</html>