Hover в мега-меню на JQuery

310

23 декабря 2016, 12:00

Помогите зделать hover в мега меню, при наведении на позицию появляется список и сразу пропадает, без возможности навести на него. Помогите это исправить на JQuery.

Вот что у меня получилось:

$('.mega-mnu ul li').hover(function () {
     var mega_inner  = $(this).find('ul');
     mega_inner.css({'display':'block'});
  },
  function () {
      var mega_inner  = $(this).find('ul');
      mega_inner.css({'display':'none'});
  }
);

http://codepen.io/jSas/pen/LbavKz

Answer 1

С функцией все нормально, надо чуть css поправить:

.mega-mnu{
      width: 75%;
      height: 565px;
      margin: 0 auto;
      background-color: #fff;
      display: block;
      padding: 70px 30px;
      text-transform: uppercase;
      position: relative;
      text-decoration: none;
        ul{
          width: 260px;
          position: relative;
          outline:2px solid green;
          li{
            margin-bottom: 30px;
            position: relative;
            outline:2px solid green;
            width: 100%;
            display: block;
              &:hover{
                &::before{
                  font-family: FontAwesome;
                  position: absolute;
                  top: -1px;
                  right: -25px;
                  font-size: 1.5em;
                }
              }
            a{
              color: #a5a5a5;
              &:hover{
                color: #000;
              }
            }
            ul{
              position: absolute;
              top: 0;
              right: -530px;
              left:250px;
              display: none;
              outline:2px solid red;
              li{
              }
            }
          }
        }
    }