在悬停菜单上暂停

Question

如何重新创建this menu hover effect？

在“为每个愿景提供程序”部分中，有一个菜单具有对鼠标悬停的保持/暂停效果，因此您可以将鼠标悬停在任何元素上，并可以毫无问题地浏览子菜单。

这是到目前为止我得到的：

.links-destacados {
  padding: 0px;
  overflow: hidden;
}

.links-destacados h2 {
  margin-top: 0px;
  font-size: 34px;
  line-height: 38px;
  color: #000b3d;
  width: 312px;
  display: inline-block;
  vertical-align: top;
  padding-left: 0;
  padding-right: 28px;
  letter-spacing: -.5px
}

.links-destacados h2 p {
  font-size: inherit;
  line-height: inherit;
  color: #000b3d
}

.links-destacados .wrapper-links {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 376px);
  position: relative
}

.links-destacados .wrapper-links .list-first-level>div>li {
  width: 54.44%;
  padding-right: 40px
}

.links-destacados .wrapper-links .list-first-level>div>li a {
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #a8a7a7;
  color: #000b3d;
  width: 100%
}

.links-destacados .wrapper-links .list-first-level>div>li.active>ul {
  display: block;
  position: absolute;
  top: 2px;
  left: 54.44%;
  padding-left: 14px;
  margin-bottom: 40px;
  width: 55.55%;
}

.links-destacados .wrapper-links .list-first-level>div>li>ul {
  display: none
}

.links-destacados .wrapper-links .list-first-level>div>li>ul li a {
  font-size: 16px;
  line-height: 24px
}

.links-destacados .wrapper-links .list-first-level>div>li.active>a,
.links-destacados .wrapper-links .list-first-level>div>li a:hover {
  color: #f2151e;
  border-color: #f2151e;
  position: relative
}

.links-destacados .wrapper-links .list-first-level>div>li.active>a:after,
.links-destacados .wrapper-links .list-first-level>div>li>a:hover:after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro';
  font-size: 22px;
  color: #f2151e;
  position: absolute;
  right: 0;
  top: calc(50% - 10px)
}

@media screen and (max-width:992px) {
  .links-destacados .wrapper-links .list-first-level>div>li a {
    font-size: 18px;
    line-height: 23px
  }
  .links-destacados .wrapper-links .list-first-level>div>li>ul li a {
    font-size: 14px;
    line-height: 18px
  }
}

@media screen and (max-width:770px) {
  .links-destacados h2 {
    margin-top: 0;
    padding: 0
  }
  .links-destacados .wrapper-links {
    height: inherit!important;
    padding: 0
  }
  .links-destacados .wrapper-links .list-first-level>div>li {
    width: 100%;
    padding-right: 0;
    border-bottom: 1px solid #d3d3d3
  }
  .links-destacados .wrapper-links .list-first-level>div>li.active>ul {
    display: none
  }
  .links-destacados .wrapper-links .list-first-level>div>li .ico-arrow {
    content: "";
    display: inline-block;
    background: url(../../images/flecha_down_grey.png) no-repeat center;
    width: 40px;
    height: 40px;
    vertical-align: middle
  }
  .links-destacados .wrapper-links .list-first-level>div>li.open .ico-arrow {
    background: url(../../images/flecha_up_grey.png) no-repeat center
  }
  .links-destacados .wrapper-links .list-first-level>div>li>a {
    width: calc(100% - 45px);
    display: inline-block;
    vertical-align: middle;
    border: 0
  }
  .links-destacados .wrapper-links .list-first-level>div>li.active>a:after,
  .links-destacados .wrapper-links .list-first-level>div>li>a:hover:after {
    content: none
  }
  .links-destacados .wrapper-links .list-first-level>div>li>ul,
  .links-destacados .wrapper-links .list-first-level>div>li.active>ul {
    position: inherit;
    top: inherit;
    left: inherit;
    width: 100%;
    padding-right: 0;
    margin-bottom: 0;
    padding-left: 0
  }
  .links-destacados .wrapper-links .list-first-level>div>li>ul a {
    border: 0;
    border-top: 1px solid #d3d3d3;
    padding: 10px 25px
  }
}

.front .links-destacados .wrapper-links .list-first-level>div>li.active>ul {
  list-style: none;
}

.links-destacados ul li {
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="links-destacados fixed-module" about="" typeof="">
  <div class="g-row">
    <h2>
      <p>Potencia tu talento con nuestras titulaciones</p>
    </h2>
    <div class="wrapper-links">
      <div class="paragraphs-items paragraphs-items-field-pr-mde-links paragraphs-items-field-pr-mde-links-modulo-de-enlaces-01-d paragraphs-items-modulo-de-enlaces-01-d">
        <ul class="list-first-level">
          <div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
            <li id="elm" class="">
              <a href="https://es.eserp.com/grados/">Grados</a>
              <ul>
                <li><a href="https://es.eserp.com/grados/grados-madrid/">Madrid</a></li>
                <li><a href="https://es.eserp.com/grados/grados-barcelona/">Barcelona</a></li>
              </ul>
            </li>
          </div>
        </ul>
        <ul class="list-first-level">
          <div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
            <li id="elm" class="">
              <a href="https://es.eserp.com/mbas/">MBA</a>
              <ul>
                <li><a href="https://es.eserp.com/mbas/mbas-madrid/">Madrid</a></li>
                <li><a href="https://es.eserp.com/mbas/mbas-barcelona/">Barcelona</a></li>
                <li><a href="https://es.eserp.com/mbas/mbas-barcelona/">Mallorca</a></li>
                <li><a href="https://es.eserp.com/mbas/mbas-online/">Online</a></li>
              </ul>
            </li>
          </div>
        </ul>
        <ul class="list-first-level">
          <div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
            <li id="elm" class="">
              <a href="https://es.eserp.com/masters/">Masters</a>
              <ul>
                <li><a href="https://es.eserp.com/masters/masters-madrid/">Madrid</a></li>
                <li><a href="https://es.eserp.com/masters/masters-barcelona/">Barcelona</a></li>
                <li><a href="https://es.eserp.com/masters/masters-mallorca/">Mallorca</a></li>
                <li><a href="https://es.eserp.com/masters/masters-online/">Online</a></li>
              </ul>
            </li>
          </div>
        </ul>
        <ul class="list-first-level">
          <div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
            <li id="elm" class="active">
              <a href="https://es.eserp.com/cfgs/">CFGS</a>
              <ul>
                <li><a href="https://es.eserp.com/cfgs/cfgs-barcelona/">Barcelona</a></li>
                <li><a href="https://es.eserp.com/cfgs/cfgs-mallorca/">Mallorca</a></li>
              </ul>
            </li>
          </div>
        </ul>
        <ul class="list-first-level">
          <div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
            <li id="elm" class="">
              <a href="https://es.eserp.com/titulaciones-superiores/">Titulaciones Superiores</a>
              <ul>
                <li><a href="https://es.eserp.com/titulaciones-superiores/titulaciones-superiores-madrid/">Madrid</a></li>
                <li><a href="https://es.eserp.com/titulaciones-superiores/titulaciones-superiores-barcelona/">Barcelona</a></li>
              </ul>
            </li>
          </div>
        </ul>
        <ul class="list-first-level">
          <div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
            <li id="elm" class="">
              <a href="https://es.eserp.com/programas-executive/">Programas Executive</a>
              <ul>
                <li><a href="https://es.eserp.com/programas-executive/programas-executive-mallorca/">Mallorca</a></li>
              </ul>
            </li>
          </div>
        </ul>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $("li#elm").hover(
    function() {
      $("li#elm").removeClass('active');
      $(this).addClass('active');
    }
  );
</script>

谢谢

Answer 1

我不是在看您的代码，但我将其视为标准用法。

有必要在左栏中列出第一级菜单。 右列包含各个第二层。

我会使用javascript。

要放置第一级，我将为data-id="xx"保存ID项目的某些值。 我将隐藏第二级（display: none;）并添加类level-id-xx。

如果我转到第一级项目，则使用javascript在右侧显示第二级。

希望我能理解你的问题。

在这种情况下，第2级位于第一个级的正下方，并且移动了

.links-destacados .wrapper-links .list-first-level > div > li.active > ul {
    display: block;
    position: absolute;
    top: 2px;
    left: 44.44%;
    padding-left: 14px;
    margin-bottom: 40px;
    width: 55.55%;
}

Answer 2

尝试这样，我在悬停时添加了一些CSS并添加了一些脚本，并且还为您搬出时添加了一个脚本。

  

添加了嵌入式注释

scale_y_discrete()

$("li#elm").hover(function() {
    $("li#elm").removeClass('active');
    $(this).addClass('active');
  });

.links-destacados {
  padding: 0px;
  overflow: hidden;
}

.links-destacados h2 {
  margin-top: 0px;
  font-size: 34px;
  line-height: 38px;
  color: #000b3d;
  width: 312px;
  display: inline-block;
  vertical-align: top;
  padding-left: 0;
  padding-right: 28px;
  letter-spacing: -.5px
}

.links-destacados h2 p {
  font-size: inherit;
  line-height: inherit;
  color: #000b3d
}

.links-destacados .wrapper-links {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 376px);
  position: relative
}

.links-destacados .wrapper-links .list-first-level>div>li {
  width: 54.44%;
  padding-right: 40px
}

.links-destacados .wrapper-links .list-first-level>div>li a {
  font-size: 20px;
  line-height: 26px;
  text-decoration: none;
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #a8a7a7;
  color: #000b3d;
  width: 100%
}

.links-destacados .wrapper-links .list-first-level>div>li.active>ul {
  display: block;
  position: absolute;
  top: 2px;
  left: 54.44%;
  padding-left: 14px;
  margin-bottom: 40px;
  width: 55.55%;
}

.links-destacados .wrapper-links .list-first-level>div>li>ul {
  display: none
}

.links-destacados .wrapper-links .list-first-level>div>li>ul li a {
  font-size: 16px;
  line-height: 24px
}

.links-destacados .wrapper-links .list-first-level>div>li.active>a,
.links-destacados .wrapper-links .list-first-level>div>li a:hover {
  color: #f2151e;
  border-color: #f2151e;
  position: relative
}

.links-destacados .wrapper-links .list-first-level>div>li.active>a:after,
.links-destacados .wrapper-links .list-first-level>div>li>a:hover:after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro';
  font-size: 22px;
  color: #f2151e;
  position: absolute;
  right: 0;
  top: calc(50% - 10px)
}

@media screen and (max-width:992px) {
  .links-destacados .wrapper-links .list-first-level>div>li a {
    font-size: 18px;
    line-height: 23px
  }
  .links-destacados .wrapper-links .list-first-level>div>li>ul li a {
    font-size: 14px;
    line-height: 18px
  }
}

@media screen and (max-width:770px) {
  .links-destacados h2 {
    margin-top: 0;
    padding: 0
  }
  .links-destacados .wrapper-links {
    height: inherit!important;
    padding: 0
  }
  .links-destacados .wrapper-links .list-first-level>div>li {
    width: 100%;
    padding-right: 0;
    border-bottom: 1px solid #d3d3d3
  }
  .links-destacados .wrapper-links .list-first-level>div>li.active>ul {
    display: none
  }
  .links-destacados .wrapper-links .list-first-level>div>li .ico-arrow {
    content: "";
    display: inline-block;
    background: url(../../images/flecha_down_grey.png) no-repeat center;
    width: 40px;
    height: 40px;
    vertical-align: middle
  }
  .links-destacados .wrapper-links .list-first-level>div>li.open .ico-arrow {
    background: url(../../images/flecha_up_grey.png) no-repeat center
  }
  .links-destacados .wrapper-links .list-first-level>div>li>a {
    width: calc(100% - 45px);
    display: inline-block;
    vertical-align: middle;
    border: 0
  }
  .links-destacados .wrapper-links .list-first-level>div>li.active>a:after,
  .links-destacados .wrapper-links .list-first-level>div>li>a:hover:after {
    content: none
  }
  .links-destacados .wrapper-links .list-first-level>div>li>ul,
  .links-destacados .wrapper-links .list-first-level>div>li.active>ul {
    position: inherit;
    top: inherit;
    left: inherit;
    width: 100%;
    padding-right: 0;
    margin-bottom: 0;
    padding-left: 0
  }
  .links-destacados .wrapper-links .list-first-level>div>li>ul a {
    border: 0;
    border-top: 1px solid #d3d3d3;
    padding: 10px 25px
  }
}

.front .links-destacados .wrapper-links .list-first-level>div>li.active>ul {
  list-style: none;
}

.links-destacados ul li {
  list-style: none;
}
/*added the following css to keep the sub menu active*/
.links-destacados .wrapper-links .list-first-level > div > li.active > ul {
    display: block;
    padding-left: 14px;
    margin-bottom: 10px;
    width: 45%;
    top: 2px;
    left: 520px;
    position: absolute;
}