Jquery 在移动视图中切断父子连接的步骤_Jquery_Css_Drop Down Menu_Responsive

Jquery 在移动视图中切断父子连接的步骤

jquery css drop-down-menu

Jquery 在移动视图中切断父子连接的步骤,jquery,css,drop-down-menu,responsive,Jquery,Css,Drop Down Menu,Responsive,我真的在移动视图中修改了我的菜单。为了方便起见，我将其放在代码笔中：菜单是简单的下拉菜单。如果要将其更改为移动视图，则子项可见，但如果悬停->光标切换为父项。此外，最后一个菜单项（last）向上并隐藏在子项下。我的兴趣是使子项成为其他菜单项，而不与父项绑定 <DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.m

我真的在移动视图中修改了我的菜单。为了方便起见，我将其放在代码笔中：

菜单是简单的下拉菜单。如果要将其更改为移动视图，则子项可见，但如果悬停->光标切换为父项。此外，最后一个菜单项（last）向上并隐藏在子项下。我的兴趣是使子项成为其他菜单项，而不与父项绑定

<DOCTYPE html>
   <html>
      <head>
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      </head>
      <body>
         <nav style="float: right; display: inline-block;">
            <div class="nav-handle-container">
               <div class="nav-handle"></div>
            </div>
            <ul id="nav">
               <li><a href="#">Main</a></li>
               <li class="sub"><a href="#">Parent</a>
                  <ul>
                     <li><a href="#">Child</a></li>
                  </ul>             
               </li>
               <li><a href="#">Last</a></li>
            </ul>
         </nav>
      </div>
      <script>
         $('.nav-handle-container').on('click', function() {
         $('#nav').toggleClass('showing');
         });
       </script>
   </body>
</html>

真的非常感谢如果有人能帮你删除移动视图中的position:absolute

用这个

    @media only screen and (max-width: 767px) {
      nav ul li.sub:hover ul {
       display: block;
       position: relative;
      }
    }

首先非常感谢。这很有效，你为我节省了很多时间，因为我真的被这东西绊倒了。我可以指出，根据提供的答案，问题已经解决了。我有额外的东西来消除子悬停下的父悬停，但我想现在我不需要额外的帮助

    @media only screen and (max-width: 767px) {
      nav ul li.sub:hover ul {
       display: block;
       position: relative;
      }
    }