<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-71"><a href="#">Contact</a> <ul class="sub-menu"> <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="https://matchmade.tv/tell-me-more/">Tell me more</a></li> <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="https://matchmade.tv/request-demo/">Request demo</a></li> </ul> </li> </div> </div>

.menu-item-has-children { position: relative; } li.menu-item-has-children a { padding-right: 16px; } .nav-primary li a { padding: 22px 30px; font-size: 14px; color: #000; display: inline-block; } li.menu-item-has-children:active .sub-menu, header.banner li.menu-item-has-children:focus .sub-menu, header.banner li.menu-item-has-children:hover .sub-menu { visibility: visible; transform: translateY(0); max-height: 500px; } header.banner .sub-menu { visibility: hidden; position: absolute; transform: translateY(-100%); transition: all .3s ease-in-out; z-index: -10; left: 0; width: 160px; top: 60px; background: #fff; list-style: none; padding: 0; padding-bottom: 14px; padding-top: 8px; border: 1px solid rgba(45,55,103,.2); }