모바일보기에서 부모 - 자식 연결을 자르려면

나는 정말 내 메뉴를 모바일보기로 만들었습니다. 더 쉽게하려면 codepen에 넣으십시오. https://codepen.io/ipg1421/pen/OxRJRB 모바일보기에서 부모 - 자식 연결을 자르려면

메뉴는 간단한 드롭 다운입니다. 모바일보기로 변경하려면 하위 항목이 표시되지만 커서를 가리키면 -> 커서가 부모로 전환됩니다. 또한 마지막 메뉴 항목 (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>

CSS

  .list ul { 
       list-style: none; 
       } 
      .list li:before { 
       content: '\f096'; 
       font-family: 'FontAwesome'; 
       float: left; 
       margin-left: -1.5em; 
       color: #1c3ba5; 
      } 
      nav { 
       padding-top: 25px; 
       padding-right: 20px; 
       } 
      nav .nav-handle-container { 
       box-sizing: border-box; 
       width: 100%; 
       padding: 30px; 
       min-height: 150px; 
       background: white; /* mobile container back color */ 
       cursor: pointer; 
       -webkit-transition: all 0.3s ease-in-out; 
       transition: all 0.3s ease-in-out; 
       display: none; 
       } 
      nav .nav-handle-container .nav-handle { 
       height: 3px; 
       width: 30px; 
       background: #ff0000; 
       position: absolute; 
       display: block; 
       /*left: -webkit-calc(100% - 50px);*/ 
       left: calc(100% - 50px); 
       top: 55px; 
       } 
      nav .nav-handle-container .nav-handle:before, nav .nav-handle-container .nav-handle:after { 
       content: ""; 
       height: 3px; 
       width: 30px; 
       background: #ff0000; 
       position: absolute; 
       display: block; 
       } 
      nav .nav-handle-container .nav-handle:before { 
       top: -10px; 
       } 
      nav .nav-handle-container .nav-handle:after { 
       bottom: -10px; 
       } 
      nav ul { 
       font-size: 13pt; 
       list-style: none; 
       background-color: white; 
       overflow: hidden; 
       color: black; /* color menu font */ 
       margin: 0; 
       padding: 0; 
       text-align: center; 
       -webkit-transition: max-height 0.4s ease-in-out; 
       transition: max-height 0.4s ease-in-out; 
       } 
      nav ul li { 
       display: inline-block; 
       border-radius: 5px; 
       } 
      nav ul li a { 
       text-decoration: none; 
       color: inherit; 
       display:block; /* a tag full click in menu */ 
       padding-right: 15px; 
       padding-left: 15px; 
       padding-top: 15px; 
       padding-bottom: 15px; 
       } 
      nav ul li:hover { 
       color: white; /* color menu active font */ 
       background: #ff0000; 
       } 
      nav ul li.sub { 
       border-top-left-radius: 5px; 
       border-top-right-radius: 5px; 
       border-bottom-left-radius: 0px; 
       border-bottom-right-radius: 0px; 
       } 
      nav ul li.sub ul { 
       display: none; 
       width: 300px; 
       position: absolute; 
       margin: 0; 
       padding: 0; 
       list-style-type: none; 
       background: #ffffff; 
       border: 1px solid #ff0000; 
       border-bottom: 5px solid #ff0000; 
       } 
      nav ul li.sub:hover ul { 
       display: block; 
       position: absolute; 
       } 
      nav ul li.sub ul li { 
       display: block; 
       border-radius: 0px; 
       } 
      nav ul li.sub ul li:hover { 
       background: black; 
       } 
      @media screen and (max-width: 760px) 
      { 
      nav { 
          padding-top: 0px; 
          padding-right: 0px; 
          width: 100%; 
          } 
      nav .showing { 
          max-height: 30.5em; 
          border-bottom: solid #ff0000 3px;    
          } 
      nav ul { 
          max-height: 0px; 
          } 
      nav ul li { 
          box-sizing: border-box; 
          width: 100%; 
          text-align: right; 
          font-size: 1.0em; 
          border-radius: 0px; 
          } 
      nav ul li a { 
          padding-right: 20px; 
          padding-top: 15px; 
          padding-bottom: 15px; 
          } 
      nav .nav-handle-container { 
          display: table-row; 
          } 
      nav ul li.sub { 
          border-radius: 0px; 
          position: relative; 
          } 
      nav ul li.sub ul { 
          display: block; 
          position: static; 
          max-height: none; 
          width: 100%; 
          border: 0px; 
          } 
      }

정말 감사 누군가가

출처

2017-09-21 Igor

안녕이 위치보다 제거하는 데 도움이 될 수 있습니다 경우 많은이

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

출처

2017-09-22 07:55:13

먼저 감사 모바일보기에

사용을 절대 많이. 그것은 작동하고 당신이 나에게 많은 시간을 절약 해주었습니다. 제공된 답에서 질문이 해결되었음을 지적 할 수 있습니다. 나는 자식 호버 아래에서 부모 호버를 제거 할 추가 사항이 있지만 지금은 추가 도움이 필요하지 않다고 생각합니다. – Igor

모바일보기에서 부모 - 자식 연결을 자르려면

답변

관련 문제