Source: http://divisoup.com/five-subtle-menu-hover-effects/

CSS for each effect for the primary menu.

Customizer Menu Effect 1 CSS – Pipes

    /* Menu Effect 1 - Pipes */
    #top-menu a::before,
    #top-menu a::after {
      display: inline-block;
      opacity: 0;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
      -moz-transition: -moz-transform 0.3s, opacity 0.2s;
      transition: transform 0.3s, opacity 0.2s;
    }
    #top-menu a::before {
      margin-right: 10px; /*you may want to adjust this*/
      content: '|'; /*you can change the pipe to something else if you wish*/
      -webkit-transform: translateX(20px);
      -moz-transform: translateX(20px);
      transform: translateX(20px);
    }
    #top-menu a::after {
      margin-left: 10px; /*you may want to adjust this*/
      content: '|'; /*you can change the pipe to something else if you wish*/
      -webkit-transform: translateX(-20px);
      -moz-transform: translateX(-20px);
      transform: translateX(-20px);
    }
    #top-menu a:hover::before,
    #top-menu a:hover::after,
    #top-menu a:focus::before,
    #top-menu a:focus::after {
      opacity: 1;
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      transform: translateX(0px);
    }Code language: CSS (css)

Customizer Menu Effect 2 CSS – Bottom Border Slide In

Doesn’t work if you have submenu’s. Use this in stead: https://kb.hrcws.nl/menu-add-underline-on-hover-and-active-item/

    /* Menu Effect 2 - bottom border slide in */
    #top-menu a {
      padding: 8px 0; /*you may want to adjust this*/
    }
    #top-menu a::after {
      position: absolute;
      top: 50%; /*you may want to adjust this*/
      left: 0;
      width: 100%;
      height: 4px; /*you may want to adjust this*/
      background: #fff;
      content: '';
      opacity: 0;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: opacity 0.3s, -moz-transform 0.3s;
      transition: opacity 0.3s, transform 0.3s;
      -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      transform: translateY(10px);
    }
    #top-menu a:hover::after,
    #top-menu a:focus::after {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      transform: translateY(0px);
    }Code language: CSS (css)

Customizer Menu Effect 3 CSS – Top Border Slide Up

    /* Menu Effect 3 - Bottom border slides up */
    #top-menu a {
      padding: 12px 10px 10px; /*you may want to adjust this*/
      color: #fff;
    }
    #top-menu a::before,
    #top-menu a::after {
      position: absolute;
      top: 60%; /*you may want to adjust this*/
      left: 0;
      width: 100%;
      height: 3px; /*you may want to adjust this*/
      background: #fff;
      content: '';
      -webkit-transition: -webkit-transform 0.3s;
      -moz-transition: -moz-transform 0.3s;
      transition: transform 0.3s;
      -webkit-transform: scale(0.85);
      -moz-transform: scale(0.85);
      transform: scale(0.85);
    }
    #top-menu a::after {
      opacity: 0;
      -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
      transition: top 0.3s, opacity 0.3s, transform 0.3s;
    }
    #top-menu a:hover::before,
    #top-menu a:hover::after,
    #top-menu a:focus::before,
    #top-menu a:focus::after {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1);
    }
    #top-menu a:hover::after,
    #top-menu a:focus::after {
      top: 0%; /*you may want to adjust this*/
      opacity: 1;
    }Code language: CSS (css)

Customizer Menu Effect 4 CSS – Circle

    /* Menu Effect 4 - Circle */
    #top-menu a {
      margin: 5px; /*you may want to adjust this*/
    }
    #top-menu a::before,
    #top-menu a::after {
      position: absolute;
      top: 15%; /*you may want to adjust this*/
      left: 50%;
      width: 80px; /*you may want to adjust this*/
      height: 80px; /*you may want to adjust this*/
      border: 2px solid rgba(255,255,255,0.6); /*you may want to adjust this*/
      border-radius: 50%;
      content: '';
      opacity: 0;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
      -moz-transition: -moz-transform 0.3s, opacity 0.3s;
      transition: transform 0.3s, opacity 0.3s;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
      -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
      transform: translateX(-50%) translateY(-50%) scale(0.2);
    }
    #top-menu a::after {
      width: 60px; /*you may want to adjust this*/
      height: 60px; /*you may want to adjust this*/
      border-width: 6px; /*you may want to adjust this*/
      -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
      -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
      transform: translateX(-50%) translateY(-50%) scale(0.8);
    }
    #top-menu a:hover::before,
    #top-menu a:hover::after,
    #top-menu a:focus::before,
    #top-menu a:focus::after {
      opacity: 1;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
      -moz-transform: translateX(-50%) translateY(-50%) scale(1);
      transform: translateX(-50%) translateY(-50%) scale(1);
    }Code language: CSS (css)

Customizer Menu Effect 5 CSS – Borders Slide In

    /* Menu Effect 5 - borders slide in */
    #top-menu a {
      color: #fff;
      -webkit-transition: color 0.3s;
      -moz-transition: color 0.3s;
      transition: color 0.3s;
    }
    #top-menu a::before,
    #top-menu a::after {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px; /*you may want to adjust this*/
      background: #fff;
      content: '';
      opacity: 0;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: opacity 0.3s, -moz-transform 0.3s;
      transition: opacity 0.3s, transform 0.3s;
      -webkit-transform: translateY(-10px);
      -moz-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    #top-menu a::before {
      top: -25%; /*you may want to adjust this*/
      -webkit-transform: translateY(-10px);
      -moz-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    #top-menu a::after {
      bottom: 40%; /*you may want to adjust this*/
      -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      transform: translateY(10px);
    }
    #top-menu a:hover,
    #top-menu a:focus {
      color: #fff;
    }
    #top-menu a:hover::before,
    #top-menu a:focus::before,
    #top-menu a:hover::after,
    #top-menu a:focus::after {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      transform: translateY(0px);
    }Code language: CSS (css)

Menu Module Effect 1 Pipes

Add the custom class .ds-my-menu-# into the CSS Class field of the modules’ Custom CSS Tab:

    /* Menu Effect 1 - Pipes */
    @media screen and (min-width: 981px) {
    .ds-my-menu-1 a::before,
    .ds-my-menu-1 a::after {
      display: inline-block;
      opacity: 0;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
      -moz-transition: -moz-transform 0.3s, opacity 0.2s;
      transition: transform 0.3s, opacity 0.2s;
    }
    .ds-my-menu-1 a::before {
      margin-right: 10px; /*you may want to adjust this*/
      content: '|'; /*you can change the pipe to something else if you wish*/
      -webkit-transform: translateX(20px);
      -moz-transform: translateX(20px);
      transform: translateX(20px);
    }
    .ds-my-menu-1 a::after {
      margin-left: 10px; /*you may want to adjust this*/
      content: '|'; /*you can change the pipe to something else if you wish*/
      -webkit-transform: translateX(-20px);
      -moz-transform: translateX(-20px);
      transform: translateX(-20px);
    }
    .ds-my-menu-1 a:hover::before,
    .ds-my-menu-1 a:hover::after,
    .ds-my-menu-1 a:focus::before,
    .ds-my-menu-1 a:focus::after {
      opacity: 1;
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      transform: translateX(0px);
    }
    }Code language: CSS (css)

Menu Module Effect 2 Bottom Border Slide In

Add the custom class .ds-my-menu-# into the CSS Class field of the modules’ Custom CSS Tab:

    /* Menu Effect 2 - bottom border slide in */
    @media screen and (min-width: 981px) {
    .ds-my-menu-2 a {
      padding: 8px 0; /*you may want to adjust this*/
      margin-bottom: 5px; /*you may want to adjust this*/
    }
    .ds-my-menu-2 a::after {
      position: absolute;
      top: 60%; /*you may want to adjust this*/
      left: 0;
      width: 100%;
      height: 4px; /*you may want to adjust this*/
      background: #fff;
      content: '';
      opacity: 0;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: opacity 0.3s, -moz-transform 0.3s;
      transition: opacity 0.3s, transform 0.3s;
      -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      transform: translateY(10px);
    }
    .ds-my-menu-2 a:hover::after,
    .ds-my-menu-2 a:focus::after {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      transform: translateY(0px);
    }
    }Code language: CSS (css)

Menu Module Effect 3 Top Border Slide Up

Add the custom class .ds-my-menu-# into the CSS Class field of the modules’ Custom CSS Tab:

    /* Menu Effect 3 - Top border slide up */
    @media screen and (min-width: 981px) {
    .ds-my-menu-3 a {
      padding: 12px 10px 10px; /*you may want to adjust this*/
      margin-bottom: 10px; /*you may want to adjust this*/
      color: #fff;
    }
    .ds-my-menu-3 a::before,
    .ds-my-menu-3 a::after {
      position: absolute;
      top: 65%; /*you may want to adjust this*/
      left: 0;
      width: 100%;
      height: 3px; /*you may want to adjust this*/
      background: #fff;
      content: '';
      -webkit-transition: -webkit-transform 0.3s;
      -moz-transition: -moz-transform 0.3s;
      transition: transform 0.3s;
      -webkit-transform: scale(0.85);
      -moz-transform: scale(0.85);
      transform: scale(0.85);
    }
    .ds-my-menu-3 a::after {
      opacity: 0;
      -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
      transition: top 0.3s, opacity 0.3s, transform 0.3s;
    }
    .ds-my-menu-3 a:hover::before,
    .ds-my-menu-3 a:hover::after,
    .ds-my-menu-3 a:focus::before,
    .ds-my-menu-3 a:focus::after {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1);
    }
    .ds-my-menu-3 a:hover::after,
    .ds-my-menu-3 a:focus::after {
      top: 0%;
      opacity: 1;
    }
    }Code language: CSS (css)

Menu Module Effect 4 CSS – Circle

Add the custom class .ds-my-menu-# into the CSS Class field of the modules’ Custom CSS Tab:

    /* Menu Effect 4 - Circle */
    @media screen and (min-width: 981px) {
    .ds-my-menu-4 a {
      margin: 25px 5px; /*you may want to adjust this*/
    }
    .ds-my-menu-4 a::before,
    .ds-my-menu-4 a::after {
      position: absolute;
      top: 15%; /*you may want to adjust this*/
      left: 50%;
      width: 100px; /*you may want to adjust this*/
      height: 100px; /*you may want to adjust this*/
      border: 2px solid rgba(255,255,255,0.6); /*you may want to adjust this*/
      border-radius: 50%;
      content: '';
      opacity: 0;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
      -moz-transition: -moz-transform 0.3s, opacity 0.3s;
      transition: transform 0.3s, opacity 0.3s;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
      -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
      transform: translateX(-50%) translateY(-50%) scale(0.2);
    }
    .ds-my-menu-4 a::after {
      width: 80px; /*you may want to adjust this*/
      height: 80px; /*you may want to adjust this*/
      border-width: 6px; /*you may want to adjust this*/
      -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
      -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
      transform: translateX(-50%) translateY(-50%) scale(0.8);
    }
    .ds-my-menu-4 a:hover::before,
    .ds-my-menu-4 a:hover::after,
    .ds-my-menu-4 a:focus::before,
    .ds-my-menu-4 a:focus::after {
      opacity: 1;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
      -moz-transform: translateX(-50%) translateY(-50%) scale(1);
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
    }Code language: CSS (css)

Menu Module Effect 5 CSS – Borders Slide In

Add the custom class .ds-my-menu-# into the CSS Class field of the modules’ Custom CSS Tab:

    /* Menu Effect 5 - borders slide in */
    @media screen and (min-width: 981px) {
    .ds-my-menu-5 a{
      margin-bottom: 5px; /*you may want to adjust this*/
    }
    .ds-my-menu-5 a {
      color: #fff;
      -webkit-transition: color 0.3s;
      -moz-transition: color 0.3s;
      transition: color 0.3s;
    }
    .ds-my-menu-5 a::before,
    .ds-my-menu-5 a::after {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px; /*you may want to adjust this*/
      background: #fff;
      content: '';
      opacity: 0;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: opacity 0.3s, -moz-transform 0.3s;
      transition: opacity 0.3s, transform 0.3s;
      -webkit-transform: translateY(-10px);
      -moz-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    .ds-my-menu-5 a::before {
      top: -25%; /*you may want to adjust this*/
      -webkit-transform: translateY(-10px);
      -moz-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    .ds-my-menu-5 a::after {
      bottom: 40%; /*you may want to adjust this*/
      -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      transform: translateY(10px);
    }
    .ds-my-menu-5 a:hover,
    .ds-my-menu-5 a:focus {
      color: #fff;
    }
    .ds-my-menu-5 a:hover::before,
    .ds-my-menu-5 a:focus::before,
    .ds-my-menu-5 a:hover::after,
    .ds-my-menu-5 a:focus::after {
      opacity: 1;
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      transform: translateY(0px);
    }
    }Code language: CSS (css)