하위 메뉴가있는 누적 메뉴, 하위 메뉴의 너비를 변경해야 함

Question

새로이 이것으로 새 기능이 추가되었습니다. 하위 메뉴가있는 누적 메뉴가 있지만 하위 메뉴의 너비가 메뉴보다 작아야합니다. 하위 메뉴의 너비를 변경할 때마다 변경되지만 부모 메뉴의 너비는 유지됩니다.

[이 하위 메뉴가 1

HTML

`<div class="row"> 
     <div class="col-md-3"> 
      <ul class="menu"> 
       <li><a href="trucks.html" target="preview-iframe">Book Trucks</a></li> 
       <li class="active"> <a href="schedule.html" target="preview-iframe" data-toggle="collapse" data-target="#toggle1" class="collapsed">Schedule <i class="fa fa-angle-down" aria-hidden="true"></i> 
       </a> 
        <div class="collapse" id="toggle1"> 
         <ul class="menu-list"> 
          <li><a href="start.html" target="preview-iframe"> Start Date</a></li> 
          <li><a href="end.html" target="preview-iframe"> End Date</a></li> 
         </ul> 
       <li class="active"> <a href="routes.html" target="preview-iframe" data-toggle="collapse" data-target="#toggle" class="collapsed">Routes <i class="fa fa-angle-down" aria-hidden="true"></i> 
       </a> 
        <div class="collapse" id="toggle"> 
         <ul class="menu-list"> 
          <li><a href="routes2.html" target="preview-iframe">Route 2</a></li> 
          <li><a href="routes3.html" target="preview-iframe">Route 3</a></li> 
          <li><a href="routes4.html" target="preview-iframe">Route 4</a></li> 
          <li><a href="routes5.html" target="preview-iframe">Route 5</a></li> 
         </ul> 
        </div> 
       </li> 
       <li><a href="region.html" target="preview-iframe">Availability Regions</a></li> 
     </div>` 




CSS 
    /* MENU */ 
    @media (min-width: 768px) { 
     .menu { 
      width:72.5%; 
      left: 100px; 
      border: 1px solid #129cf3; 
      position: absolute; 
      background-color: #f2f2f2; 
      font: 18px 'Raleway', sans-serif; 
      text-align: center; 
      text-decoration: none; 
      border-collapse: collapse; 
      top: 250px; 
      font-weight: 600; 
      border-bottom: none; 
      transition: all 1s; 
      box-shadow: 10px 10px 5px #888888; 
     } 
     .menu li { 
      list-style: none; 
      text-decoration: none; 
     } 
    } 
    .menu a { 
     color: #000; 
     left: 800px; 
     text-transform: uppercase; 
     letter-spacing: .1em; 
     text-decoration: none; 
     display: block; 
     padding: 35px; 
     border-bottom: 1px solid #129cf3; 
     text-align: center; 
     border-collapse: collapse; 
     transition: all 1s; 
    } 
    .menu a:hover { 
     background-color: #129cf3; 
     color: #000; 
     text-decoration: none; 
    } 
    .menu i { 
     font-weight: 600; 
    } 

    #toggle,menu:before 
    #toggle:after{ 
     width 50%; 
    } 

    .menu-list li a{ 
     margin-left: 20px; 
     margin-right: 20px; 
     margin-bottom:0px; 
     margin-top: 0px; 
     padding: 15px; 
     border: 0px; 
     font-size: 12px; 
     text-align: center; 
    } 

https://jsfiddle.net/cnezagf0/

Answer 1

이가 CSS를 것/* MENU */

ul{ 

     list-style:none; 
     padding:0;margin:0; 
    } 
    @media (min-width: 768px) { 
     .menu { 
      width:72.5%; 
      left: 100px; 
      border: 1px solid #129cf3; 
      position: relatve; 
      background-color: #f2f2f2; 
      font: 18px 'Raleway', sans-serif; 
      text-align: center; 
      text-decoration: none; 
      border-collapse: collapse; 
      top: 250px; 
      font-weight: 600; 
      border-bottom: none; 
      transition: all 1s; 
      box-shadow: 10px 10px 5px #888888; 
     } 
     .menu>li { 
      list-style: none; 
      text-decoration: none; 
     } 
    } 
    .menu >li>a { 
     color: #000; 
     left: 800px; 
     text-transform: uppercase; 
     letter-spacing: .1em; 
     text-decoration: none; 
     display: block; 
     padding: 35px; 
     border-bottom: 1px solid #129cf3; 
     text-align: center; 
     border-collapse: collapse; 
     transition: all 1s; 
    } 
    .menu >li> a:hover { 
     background-color: #129cf3; 
     color: #000; 
     text-decoration: none; 
    } 
    .menu i { 
     font-weight: 600; 
    } 

    #toggle,menu:before 
    #toggle:after{ 
     width 50%; 
    } 

    .menu-list >li >a{ 
    margin: 0 auto; 
    padding: 15px; 
    border: 0px; 
    font-size: 12px; 
    text-align: center; 
    color: #000; 
    text-transform: uppercase; 
    letter-spacing: .1em; 
    text-decoration: none; 
    text-align: center; 
    width: 80%; 
    background: red; 
    display: block; 

    } 

및 피들러 링크를 모습입니다 https://jsfiddle.net/zsL2d92y/1/