Question

这里有一个下拉菜单，其中有子菜单结构和类名，与父菜单结构相同。我试图在父菜单项上的悬停上显示子级菜单项，但是我只能在第一级菜单上工作，而不能在第二级菜单项上工作。

我在这里做什么错了？

下面是我的示例代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">

    .we-mega-menu-submenu{
        position: relative;
        display: none;
    }

</style>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.we-mega-menu-li.dropdown-menu').mouseover(function(){
            $(this).find('div.we-mega-menu-submenu:first').css({
                "display":"block"
            });
        })

        $('.we-mega-menu-li.dropdown-menu').mouseout(function(){
            $(this).find('div.we-mega-menu-submenu:first').css({
                "display":"none"
            });
        })

    })
</script>

<ul class="nav-tabs">
    <li class="we-mega-menu-li dropdown-menu">
        <a href="#">Menu 1</a>
        <div class="we-mega-menu-submenu">
            <ul class="nav-tabs">
                <li class="we-mega-menu-li">submenu1</li>
                <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                    <div class="we-mega-menu-submenu">
                        <ul class="nav-tabs">
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                        </ul>
                    </div>
                <li class="we-mega-menu-li">submenu3</li>
                <li class="we-mega-menu-li">submenu4</li>
                <li class="we-mega-menu-li">submenu5</li>
            </ul>
        </div>
    <li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
    <li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
    <li class="we-mega-menu-li dropdown-menu">
    <a href="3">Menu 4</a>
        <div class="we-mega-menu-submenu">
            <ul class="nav-tabs">
                <li class="we-mega-menu-li">submenu1</li>
                <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                    <div class="we-mega-menu-submenu">
                        <ul class="nav-tabs">
                            <li>submenu1</li>
                            <li>submenu2</li>
                            <li>submenu3</li>
                            <li>submenu4</li>
                            <li>submenu5</li>
                        </ul>
                    </div>
                <li class="we-mega-menu-li">submenu3</li>
                <li class="we-mega-menu-li">submenu4</li>
                <li class="we-mega-menu-li">submenu5</li>
            </ul>
        </div>
    </li>
    <li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
</ul>

</body>
</html>

这里是codepen URL

https://codepen.io/Chandanay/pen/YzKJNEE

Answer 1

您需要将类别为“ we-mega-menu-submenu” 的元素放入类别为“ dropdown-menu”

的元素中

$(document).ready(function () {
     $('.we-mega-menu-li.dropdown-menu').mouseover(function () {
         $(this).find('div.we-mega-menu-submenu:first').css({
             "display": "block"
         });
     })
     $('.we-mega-menu-li.dropdown-menu').mouseout(function () {
         $(this).find('div.we-mega-menu-submenu:first').css({
             "display": "none"
         });
     })
 })

.we-mega-menu-submenu{
               position: relative;
               display: none;
           }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-tabs">
           <li class="we-mega-menu-li dropdown-menu">
               <a href="#">Menu 1</a>
               <div class="we-mega-menu-submenu">
                   <ul class="nav-tabs">
                       <li class="we-mega-menu-li">submenu1</li>
                       <li class="we-mega-menu-li dropdown-menu">submenu2
                           <div class="we-mega-menu-submenu">
                               <ul class="nav-tabs">
                                   <li>submenu1</li>
                                   <li>submenu1</li>
                                   <li>submenu1</li>
                                   <li>submenu1</li>
                                   <li>submenu1</li>
                               </ul>
                           </div>
                       </li>
                       <li class="we-mega-menu-li">submenu3</li>
                       <li class="we-mega-menu-li">submenu4</li>
                       <li class="we-mega-menu-li">submenu5</li>
                   </ul>
               </div>
           <li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
           <li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
           <li class="we-mega-menu-li dropdown-menu">
               <a href="3">Menu 4</a>
               <div class="we-mega-menu-submenu">
                   <ul class="nav-tabs">
                       <li class="we-mega-menu-li">submenu1</li>
                       <li class="we-mega-menu-li dropdown-menu">submenu2
                           <div class="we-mega-menu-submenu">
                               <ul class="nav-tabs">
                                   <li>submenu1</li>
                                   <li>submenu2</li>
                                   <li>submenu3</li>
                                   <li>submenu4</li>
                                   <li>submenu5</li>
                               </ul>
                           </div>
                       </li>
                       <li class="we-mega-menu-li">submenu3</li>
                       <li class="we-mega-menu-li">submenu4</li>
                       <li class="we-mega-menu-li">submenu5</li>
                   </ul>
               </div>
           </li>
           <li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
       </ul>

Answer 2

您忘了在第二，第三和第五菜单中添加列表项和.dropdown-menu类
这是更新的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">

    .we-mega-menu-submenu{
        position: relative;
        display: none;
    }

</style>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.we-mega-menu-li.dropdown-menu').mouseover(function(){
            $(this).find('div.we-mega-menu-submenu:first').css({
                "display":"block"
            });
        })

        $('.we-mega-menu-li.dropdown-menu').mouseout(function(){
            $(this).find('div.we-mega-menu-submenu:first').css({
                "display":"none"
            });
        })

    })
</script>

<ul class="nav-tabs">
    <li class="we-mega-menu-li dropdown-menu">
        <a href="#">Menu 1</a>
        <div class="we-mega-menu-submenu">
            <ul class="nav-tabs">
                <li class="we-mega-menu-li">submenu1</li>
                <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                    <div class="we-mega-menu-submenu">
                        <ul class="nav-tabs">
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                            <li>submenu1</li>
                        </ul>
                    </div>
                <li class="we-mega-menu-li">submenu3</li>
                <li class="we-mega-menu-li">submenu4</li>
                <li class="we-mega-menu-li">submenu5</li>
            </ul>
        </div>
    <li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 2</a>
      <div class="we-mega-menu-submenu">
          <ul class="nav-tabs">
              <li class="we-mega-menu-li">submenu1</li>
              <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                  <div class="we-mega-menu-submenu">
                      <ul class="nav-tabs">
                          <li>submenu1</li>
                          <li>submenu2</li>
                          <li>submenu3</li>
                          <li>submenu4</li>
                          <li>submenu5</li>
                      </ul>
                  </div>
              <li class="we-mega-menu-li">submenu3</li>
              <li class="we-mega-menu-li">submenu4</li>
              <li class="we-mega-menu-li">submenu5</li>
          </ul>
      </div>
    </li>
    <li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 3</a>
      <div class="we-mega-menu-submenu">
          <ul class="nav-tabs">
              <li class="we-mega-menu-li">submenu1</li>
              <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                  <div class="we-mega-menu-submenu">
                      <ul class="nav-tabs">
                          <li>submenu1</li>
                          <li>submenu2</li>
                          <li>submenu3</li>
                          <li>submenu4</li>
                          <li>submenu5</li>
                      </ul>
                  </div>
              <li class="we-mega-menu-li">submenu3</li>
              <li class="we-mega-menu-li">submenu4</li>
              <li class="we-mega-menu-li">submenu5</li>
          </ul>
      </div>
    </li>
    <li class="we-mega-menu-li dropdown-menu">
    <a href="3">Menu 4</a>
        <div class="we-mega-menu-submenu">
            <ul class="nav-tabs">
                <li class="we-mega-menu-li">submenu1</li>
                <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                    <div class="we-mega-menu-submenu">
                        <ul class="nav-tabs">
                            <li>submenu1</li>
                            <li>submenu2</li>
                            <li>submenu3</li>
                            <li>submenu4</li>
                            <li>submenu5</li>
                        </ul>
                    </div>
                <li class="we-mega-menu-li">submenu3</li>
                <li class="we-mega-menu-li">submenu4</li>
                <li class="we-mega-menu-li">submenu5</li>
            </ul>
        </div>
    </li>
    <li class="we-mega-menu-li dropdown-menu"><a href="#">Menu 5</a>
      <div class="we-mega-menu-submenu">
          <ul class="nav-tabs">
              <li class="we-mega-menu-li">submenu1</li>
              <li class="we-mega-menu-li dropdown-menu">submenu2</li>
                  <div class="we-mega-menu-submenu">
                      <ul class="nav-tabs">
                          <li>submenu1</li>
                          <li>submenu2</li>
                          <li>submenu3</li>
                          <li>submenu4</li>
                          <li>submenu5</li>
                      </ul>
                  </div>
              <li class="we-mega-menu-li">submenu3</li>
              <li class="we-mega-menu-li">submenu4</li>
              <li class="we-mega-menu-li">submenu5</li>
          </ul>
      </div>
    </li>
</ul>

</body>
</html>

如何在菜单项上的悬停上显示子菜单项

2 个答案: