Hi JonJacobs,
Please refer below demo sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul.nav { padding-left: 0px; background-color: #3D99CE; text-align: left; }
ul.nav > li { display: inline-block; padding: 10px 10px; height: 10px; }
ul.nav > li:hover { background-color: #2779BF; }
ul.nav > li > a { color: white; text-decoration: none; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1; }
.dropdown:hover .dropdown-content { display: block; }
.vertical-menu a { background-color: darkcyan; color: black; padding: 10px; display: block; text-decoration: none }
.vertical-menu a:hover { background-color: ThreeDFace; }
</style>
</head>
<body>
<form>
<center>
<h1>Main Form</h1>
<ul class="nav">
<li><a href="#">Form 1</a></li>
<li><a href="#">Form 2</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown">Form 3</a>
<div class="dropdown-content">
<ul class="vertical-menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</ul>
</div>
</li>
</ul>
</center>
</form>
</body>
</html>
Demo
