Change dropdown to work on hover instead of on click (#62)

* Change dropdown to hover

Author: Bgreen23

_sass/navigation.scss

@@ -247,8 +247,8 @@
       padding-right: rem(32px);
       position: relative;
       background-image: url($baseurl + "/assets/images/chevron-right-white.svg");
-      background-size: 7px 12px;
-      background-position: top 7px right 15px;
+      background-size: 7px 18px;
+      background-position: top 6px right 15px;
       background-repeat: no-repeat;
       &:hover {
         background-image: url($baseurl + "/assets/images/chevron-right-orange.svg");
@@ -259,7 +259,7 @@
       padding-right: rem(32px);
       position: relative;
       background-image: url($baseurl + "/assets/images/chevron-down-white.svg");
-      background-size: 13px 13px;
+      background-size: 14px 18px;
       background-position: top 7px right 10px;
       background-repeat: no-repeat;
       &:hover {
@@ -305,13 +305,11 @@
   width: 226px;
   display: none;
   position: absolute;
-  top: rem(50px);
   z-index: 1000;
   display: none;
   float: left;
   min-width: 10rem;
   padding: 0.5rem 0;
-  margin: 0.125rem 0 0;
   font-size: 1rem;
   color: #212529;
   text-align: left;
@@ -322,8 +320,10 @@
   border-radius: 0.25rem;
 }
 
-.ecosystem-dropdown-menu.show-menu, .resources-dropdown-menu.show-menu {
-  display: block;
+.ecosystem-dropdown:hover, .resources-dropdown:hover {
+  .ecosystem-dropdown-menu, .resources-dropdown-menu {
+    display: block;
+  }
 }
 
 .main-menu ul li {

assets/main-menu-dropdown.js

@@ -1,9 +1,9 @@
-$("[data-toggle='ecosystem-dropdown']").on("click", function() {
+$("[data-toggle='ecosystem-dropdown']").hover(function() {
   toggleDropdown($(this).attr("data-toggle"));
   toggleArrowClass(".ecosystem-option");
 });
 
-$("[data-toggle='resources-dropdown']").on("click", function() {
+$("[data-toggle='resources-dropdown']").hover(function() {
   toggleDropdown($(this).attr("data-toggle"));
   toggleArrowClass(".resource-option");
 });