Hover effect on menu items

I’m trying to add in a hover effect to our header navigation. However, it’s not covering the entire area of the main menu items. It’s also moving the sub menu up by what looks like one pixel when your mouse switches off of a main menu item to it’s drop-down menu or if you move slightly to the side of it.

http://df50mobilewpe.wpengine.com/

Code from style.css:

  .nav-menu li,
  .footer-nav-menu li {
    display:inline-block;
    padding: 0 20px;
  }

  .nav-menu li:first-child, .nav-menu li.first, .footer-nav-menu li:first-child, .footer-nav-menu li.first {
    padding-left:0;
  }
  .nav-menu li:last-child, .nav-menu li.last, .footer-nav-menu li:last-child, .footer-nav-menu li.last {
    padding-right:0;
    border-right:0;
  }
  nav-menu li.current_page_parent>a, .nav-menu li>a:hover {
      color: #fff;
      background-color: #009444;
      display: block;
  }

  .nav-menu li a, .footer-nav-menu li a {
      text-decoration: none;
      width: 100%;
      padding: 6.5px 10px 6px 10px;
      height: 100%;
      margin: -7px 0 0 -10px;
  }

  .nav-menu li.current-menu-item > a,{
    color: #009444;
    padding: 6.5px 0px;
  }

  .nav-menu li a,
  .footer-nav-menu li a{
    text-decoration:none;
  }
  .footer-nav-menu li.current-menu-item a,
  .footer-nav-menu li.current_page_parent a{
    text-decoration:underline;
  }

  .nav-menu .sub-menu{
    display:none;
    position:absolute;
    z-index:3;
    box-shadow: 7px 7px 2px -2px rgba(0, 0, 0, 0.10);
    min-width:100%;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(200deg, #ffffff 0%,#ffffff 51%,#ededed 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(200deg, #ffffff 0%,#ffffff 51%,#ededed 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(200deg, #ffffff 0%,#ffffff 51%,#ededed 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    box-sizing:border-box;
    padding: 0px 10px;
    left:0;
    top:100%;
    z-index:4;
    margin: 6px 0px 0px 0px;
    border-bottom: 1px solid #075aa0;
  }

  .nav-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    padding-top: 0;
    overflow-y: scroll;
    max-height: 450px;
  }
  .nav-menu li:hover > .sub-menu{
    display:block;
  }
  .nav-menu .sub-menu li{
    display:block;
    border: none;
    padding: 5px 0;
  }
  .nav-menu .sub-menu li + li{
    border-top: 1px solid #075aa0;
  }
  .nav-menu .sub-menu li a{
    white-space:nowrap;
  }

Read more here: Hover effect on menu items

Leave a Reply

Your email address will not be published. Required fields are marked *