순수한 CSS 메뉴가 열려있을 때 신체 스크롤을 방지하고 장치 높이를 넘어서도 메뉴를 스크롤 할 수있게합니다.

Question

주로 작은 화면/모바일 장치에서 일부 문제를 일으키는 순수 CSS 메뉴가 있습니다.

1 호 메뉴가 열려도 배경은 여전히 ​​스크롤 가능합니다. 메뉴에 포커스를두고 싶기 때문에 메뉴가 열려있을 때 배경이 스크롤되지 않습니다.

문제 2 작은 화면에서 메뉴 항목은 기본적으로 축소되어 있으며 클릭하면 하위 메뉴가 표시됩니다. 하나 또는 둘이 확장되어 콘텐츠가 장치 창을 넘으면 현재 창보기 외부의 내용을 보려면 아래로 스크롤 할 수 없습니다. 메뉴가 확장되면 스크롤 할 수 있어야합니다.

오버 플로우 속성을 실험했지만 문제를 해결할 수 없습니다. 누군가가 어떻게되는지 알고 있기를 바랍니다. 감사!

\t 
 
\t \t body { 
 
    margin: 0; 
 
    font-family: serif; 
 
    background-color: #f4f4f4; 
 
} 
 
html { 
 
\t color: #222; 
 
\t font-size: 1.2em; 
 
\t line-height: 1; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
/* ========================================================================== 
 
    Global Header 
 
    ========================================================================== */ 
 

 
.global-nav { 
 
\t /*overflow: hidden;*/ 
 
\t background-color: #FFF; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t z-index: 9999; 
 
\t padding: 28px 0 0 0; 
 
} 
 
.header { 
 
\t background-color: #fff; 
 
\t margin: 0 auto; 
 
\t width: 1170px; 
 
\t z-index: 3; 
 
\t clear: both; 
 
} 
 
.header div.menu { 
 
\t overflow: hidden; 
 
\t background-color: #fff; 
 
\t padding: 20px 0 0 0; 
 
\t -webkit-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1); 
 
\t -moz-box-shadow: 0px 3px 3px 0px rgba(136,136,136,1); 
 
\t box-shadow: 0px 3px 3px 0px rgba(136,136,136,1); 
 
\t z-index: 99999999; 
 
} 
 
.header img { 
 
\t vertical-align: baseline; 
 
} 
 
.header div.menu ul.menu-links { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
} 
 
.menu-col-one { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-two { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-three { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-four { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-five { 
 
\t display: none; 
 
} 
 
.header div.menu ul.menu-links li a { 
 
\t display: block; 
 
\t padding: 20px 0 0 0; 
 
} 
 
.header .menu { 
 
\t clear: both; 
 
\t max-height: 0; 
 
\t transition: max-height .2s ease-out; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t left: 0; 
 
} 
 
.header .menu-icon { 
 
\t cursor: pointer; 
 
\t display: inline-block; 
 
\t padding: 31px 32px 25px 0; 
 
\t position: relative; 
 
} 
 
.header .menu-icon .navicon { 
 
\t background: #00539D; 
 
\t display: block; 
 
\t height: 2px; 
 
\t position: relative; 
 
\t transition: background .2s ease-out; 
 
\t width: 40px; 
 
} 
 
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after { 
 
\t background: #00539D; 
 
\t content: ''; 
 
\t display: block; 
 
\t height: 100%; 
 
\t position: absolute; 
 
\t transition: all .2s ease-out; 
 
\t width: 100%; 
 
} 
 
.header .menu-icon .navicon:before { 
 
\t top: 12px; 
 
} 
 
.header .menu-icon .navicon:after { 
 
\t top: -12px; 
 
} 
 
.header .menu-btn { 
 
\t display: none; 
 
} 
 
.header .menu-btn:checked ~ .menu { 
 
\t max-height: 100%; 
 
} 
 
.header .menu-btn:checked ~ .menu-icon .navicon { 
 
\t background: transparent; 
 
} 
 
.header .menu-btn:checked ~ .menu-icon .navicon:before { 
 
\t transform: rotate(-45deg); 
 
} 
 
.header .menu-btn:checked ~ .menu-icon .navicon:after { 
 
\t transform: rotate(45deg); 
 
} 
 
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { 
 
\t top: 0; 
 
} 
 
.ac-container { 
 
\t width: 1170px; 
 
\t margin: 40px auto 30px auto; 
 
\t text-align: left; 
 
} 
 
.ac-container article { 
 
\t overflow: visible; 
 
\t padding-right: 30px; 
 
} 
 
.ac-container input { 
 
\t display: none; 
 
} 
 
.ac-container label { 
 
\t position: relative; 
 
\t z-index: 20; 
 
\t display: block; 
 
\t cursor: pointer; 
 
\t font-size: 25px; 
 
} 
 

 

 

 

 
@media only screen and (max-width: 1169px) { 
 

 
.header { 
 
\t margin: 0 2%; 
 
\t width: 96%; 
 
\t padding-right: 0; 
 
} 
 
.ac-container { 
 
\t width: 96%; 
 
\t padding: 0 2%; 
 
} 
 

 
} 
 

 

 
@media only screen and (max-width: 970px) { 
 
.global-nav { 
 
\t padding: 14px 0 0 0; 
 
} 
 
.header .menu-icon { 
 
\t padding: 31px 1% 25px 0; 
 
} 
 
.header-content-right { 
 
\t display: none; 
 
} 
 
.header div.menu { 
 
\t margin-top: 0px; 
 
} 
 
.header div.menu ul.menu-links { 
 
\t margin: 0; 
 
} 
 
.menu-col-one { 
 
\t width: 100%; 
 
\t border-bottom: 1px solid #f1f1f1; 
 
\t margin-left: 0%; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-two { 
 
\t width: 100%; 
 
\t border-bottom: 1px solid #f1f1f1; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-three { 
 
\t width: 100%; 
 
\t border-bottom: 1px solid #f1f1f1; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-four { 
 
\t width: 100%; 
 
\t margin-right: 0%; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-five { 
 
\t width: 100%; 
 
\t margin-right: 0%; 
 
\t display: block; 
 
} 
 
.header div.menu ul li.list-header { 
 
\t display: block !important; 
 
} 
 
.header div.menu ul li.list-item { 
 
\t display: none; 
 
} 
 
.ac-container label { 
 
\t font-size: 16px; 
 
\t color: #636c76; 
 
\t font-weight: bold; 
 
\t letter-spacing: 0.2px; 
 
} 
 
.ac-container input:checked + label, .ac-container input:checked + label:hover { 
 
\t color: #454545; 
 
} 
 
.ac-container input + label:after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t width: 24px; 
 
\t height: 24px; 
 
\t right: 13px; 
 
\t top: -6px; 
 
} 
 

 
.ac-container article { 
 
\t background: rgba(255, 255, 255, 0.5); 
 
\t margin-top: -1px; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
\t z-index: 10; 
 
\t -webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t -moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t -o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t -ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t max-height: 0; 
 
\t font-size: 14px; 
 
} 
 
.ac-container article a { 
 
\t color: #636c76; 
 
} 
 
.ac-container article p { 
 
\t line-height: 23px; 
 
\t font-size: 14px; 
 
\t padding: 20px; 
 
} 
 
.ac-container article ul li { 
 
\t padding: 10px 0; 
 
} 
 
.ac-container article ul li span { 
 
\t display: none; 
 
} 
 
.ac-container input:checked ~ article { 
 
\t -webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t -moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t -o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t -ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t max-height: 500px;/*added*/ 
 
} 
 
}

<!-- [Start] Header Section--> 
 
<section class="global-nav" role="region" aria-label="globalnav"> 
 
    <header class="header" role="banner"> 
 
    <input class="menu-btn" type="checkbox" id="menu-btn" /> 
 
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
 

 
    <div class="menu"> 
 
     <section class="ac-container"> 
 
     <div class="menu-col-one"> 
 
      <input id="ac-1" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-1">DD 1</label> 
 
      <article class="ac-small"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-two"> 
 
      <input id="ac-2" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-2">DD 2</label> 
 
      <article class="ac-medium"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-three"> 
 
      <input id="ac-3" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-3">DD 3</label> 
 
      <article class="ac-large"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-four"> 
 
      <input id="ac-4" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-4">DD 4</label> 
 
      <article class="ac-large"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-five"> 
 

 
      <div class="btn-group"> 
 
      <button class="btn">Button</button> 
 
      <button class="btn">Button</button> 
 
      <button class="btn">Button</button> 
 
      </div> 
 
     </div> 
 
     </section> 
 
    </div> 
 
    </header> 
 
</section> 
 
<!-- [End] Header Section--> 
 
<!-- [Start] Main Content --> 
 
<main role="main"> 
 
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p> 
 
    <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p> 
 
    <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p> 
 
    <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p> 
 
    <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p> 
 
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p> 
 
    <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p> 
 
    <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p> 
 
    <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p> 
 
    <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p> 
 
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p> 
 
    <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p> 
 
    <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p> 
 
    <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p> 
 
    <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p> 
 
    
 
    <!-- [End] Main Content --> 
 
</main>

Answer 1

빠른 대답 :

• 이 html, body, main에 height: 100%를 추가 main 및 .menu
• 에 overflow: auto을 추가합니다.
• 은 17px로 max-height: 100%

.menu 제작 헤더 작은 추가 만이 box-shadow on the bottom을 표시. 그래도 스크롤바가 완전히 제거 된 모바일 장치에 대해서는 이것을 오버라이드해야 할 것입니다 ...

개인적으로, 필자는 몸의 위쪽에 패딩을 추가 한 다음 메뉴를 슬라이드 위로 올려 놓습니다. 가장 우아한 것입니다.

body { 
 
    margin: 0; 
 
    font-family: serif; 
 
    background-color: #f4f4f4; 
 
    height: 100%; /* My code */ 
 
} 
 
html { 
 
\t color: #222; 
 
\t font-size: 1.2em; 
 
\t line-height: 1; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
    height: 100%; /* My code */ 
 
    overflow: hidden; /* My code */ 
 
} 
 

 
/* My code */ 
 
main { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
/* ========================================================================== 
 
    Global Header 
 
    ========================================================================== */ 
 

 
.global-nav { 
 
\t /*overflow: hidden;*/ 
 
\t background-color: #FFF; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: calc(100% - 17px); /* My code */ 
 
\t z-index: 9999; 
 
\t padding: 28px 0 0 0; 
 
} 
 
.header { 
 
\t background-color: #fff; 
 
\t margin: 0 auto; 
 
\t width: 1170px; 
 
\t z-index: 3; 
 
\t clear: both; 
 
} 
 
.header div.menu { 
 
\t overflow: hidden; 
 
\t background-color: #fff; 
 
\t padding: 20px 0 0 0; 
 
\t -webkit-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */ 
 
\t -moz-box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */ 
 
\t box-shadow: 0px 5px 3px -3px rgba(136,136,136,1); /* My code */ 
 
\t z-index: 99999999; 
 
} 
 
.header img { 
 
\t vertical-align: baseline; 
 
} 
 
.header div.menu ul.menu-links { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
} 
 
.menu-col-one { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-two { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-three { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-four { 
 
\t width: 25%; 
 
\t float: left; 
 
\t position: relative; 
 
\t padding-bottom: 60px; 
 
} 
 
.menu-col-five { 
 
\t display: none; 
 
} 
 
.header div.menu ul.menu-links li a { 
 
\t display: block; 
 
\t padding: 20px 0 0 0; 
 
} 
 
.header .menu { 
 
\t clear: both; 
 
\t max-height: 0; 
 
\t transition: max-height .2s ease-out; 
 
\t width: calc(100% - 17px); /* My code */ 
 
\t position: fixed; 
 
\t left: 0; 
 
} 
 
.header .menu-icon { 
 
\t cursor: pointer; 
 
\t display: inline-block; 
 
\t padding: 31px 32px 25px 0; 
 
\t position: relative; 
 
} 
 
.header .menu-icon .navicon { 
 
\t background: #00539D; 
 
\t display: block; 
 
\t height: 2px; 
 
\t position: relative; 
 
\t transition: background .2s ease-out; 
 
\t width: 40px; 
 
} 
 
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after { 
 
\t background: #00539D; 
 
\t content: ''; 
 
\t display: block; 
 
\t height: 100%; 
 
\t position: absolute; 
 
\t transition: all .2s ease-out; 
 
\t width: 100%; 
 
} 
 
.header .menu-icon .navicon:before { 
 
\t top: 12px; 
 
} 
 
.header .menu-icon .navicon:after { 
 
\t top: -12px; 
 
} 
 
.header .menu-btn { 
 
\t display: none; 
 
} 
 
.header .menu-btn:checked ~ .menu { 
 
    max-height: calc(100% - 20px); /* My code */ 
 
    overflow: auto; /* My code */ 
 
} 
 
.header .menu-btn:checked ~ .menu-icon .navicon { 
 
\t background: transparent; 
 
} 
 
.header .menu-btn:checked ~ .menu-icon .navicon:before { 
 
\t transform: rotate(-45deg); 
 
} 
 
.header .menu-btn:checked ~ .menu-icon .navicon:after { 
 
\t transform: rotate(45deg); 
 
} 
 
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { 
 
\t top: 0; 
 
} 
 
.ac-container { 
 
\t width: 1170px; 
 
\t margin: 40px auto 30px auto; 
 
\t text-align: left; 
 
} 
 
.ac-container article { 
 
\t overflow: visible; 
 
\t padding-right: 30px; 
 
} 
 
.ac-container input { 
 
\t display: none; 
 
} 
 
.ac-container label { 
 
\t position: relative; 
 
\t z-index: 20; 
 
\t display: block; 
 
\t cursor: pointer; 
 
\t font-size: 25px; 
 
} 
 

 

 

 

 
@media only screen and (max-width: 1169px) { 
 

 
.header { 
 
\t margin: 0 2%; 
 
\t width: 96%; 
 
\t padding-right: 0; 
 
} 
 
.ac-container { 
 
\t width: 96%; 
 
\t padding: 0 2%; 
 
} 
 

 
} 
 

 

 
@media only screen and (max-width: 970px) { 
 
.global-nav { 
 
\t padding: 14px 0 0 0; 
 
} 
 
.header .menu-icon { 
 
\t padding: 31px 1% 25px 0; 
 
} 
 
.header-content-right { 
 
\t display: none; 
 
} 
 
.header div.menu { 
 
\t margin-top: 0px; 
 
} 
 
.header div.menu ul.menu-links { 
 
\t margin: 0; 
 
} 
 
.menu-col-one { 
 
\t width: 100%; 
 
\t border-bottom: 1px solid #f1f1f1; 
 
\t margin-left: 0%; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-two { 
 
\t width: 100%; 
 
\t border-bottom: 1px solid #f1f1f1; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-three { 
 
\t width: 100%; 
 
\t border-bottom: 1px solid #f1f1f1; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-four { 
 
\t width: 100%; 
 
\t margin-right: 0%; 
 
\t margin-bottom: 30px; 
 
\t padding-bottom: 25px; 
 
} 
 
.menu-col-five { 
 
\t width: 100%; 
 
\t margin-right: 0%; 
 
\t display: block; 
 
} 
 
.header div.menu ul li.list-header { 
 
\t display: block !important; 
 
} 
 
.header div.menu ul li.list-item { 
 
\t display: none; 
 
} 
 
.ac-container label { 
 
\t font-size: 16px; 
 
\t color: #636c76; 
 
\t font-weight: bold; 
 
\t letter-spacing: 0.2px; 
 
} 
 
.ac-container input:checked + label, .ac-container input:checked + label:hover { 
 
\t color: #454545; 
 
} 
 
.ac-container input + label:after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t width: 24px; 
 
\t height: 24px; 
 
\t right: 13px; 
 
\t top: -6px; 
 
} 
 

 
.ac-container article { 
 
\t background: rgba(255, 255, 255, 0.5); 
 
\t margin-top: -1px; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
\t z-index: 10; 
 
\t -webkit-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t -moz-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t -o-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t -ms-transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t transition: max-height 0.3s ease-out, box-shadow 0.6s linear; 
 
\t max-height: 0; 
 
\t font-size: 14px; 
 
} 
 
.ac-container article a { 
 
\t color: #636c76; 
 
} 
 
.ac-container article p { 
 
\t line-height: 23px; 
 
\t font-size: 14px; 
 
\t padding: 20px; 
 
} 
 
.ac-container article ul li { 
 
\t padding: 10px 0; 
 
} 
 
.ac-container article ul li span { 
 
\t display: none; 
 
} 
 
.ac-container input:checked ~ article { 
 
\t -webkit-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t -moz-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t -o-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t -ms-transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t transition: max-height 0.5s ease-in, box-shadow 0.1s linear; 
 
\t max-height: 500px;/*added*/ 
 
} 
 
}

<!-- [Start] Header Section--> 
 
<section class="global-nav" role="region" aria-label="globalnav"> 
 
    <header class="header" role="banner"> 
 
    <input class="menu-btn" type="checkbox" id="menu-btn" /> 
 
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
 

 
    <div class="menu"> 
 
     <section class="ac-container"> 
 
     <div class="menu-col-one"> 
 
      <input id="ac-1" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-1">DD 1</label> 
 
      <article class="ac-small"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-two"> 
 
      <input id="ac-2" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-2">DD 2</label> 
 
      <article class="ac-medium"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-three"> 
 
      <input id="ac-3" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-3">DD 3</label> 
 
      <article class="ac-large"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-four"> 
 
      <input id="ac-4" name="accordion-1" type="checkbox" /> 
 
      <label for="ac-4">DD 4</label> 
 
      <article class="ac-large"> 
 
      <ul class="menu-links"> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
       <li><a href="#">Link</a> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li> 
 
      </ul> 
 
      </article> 
 
     </div> 
 
     <div class="menu-col-five"> 
 

 
      <div class="btn-group"> 
 
      <button class="btn">Button</button> 
 
      <button class="btn">Button</button> 
 
      <button class="btn">Button</button> 
 
      </div> 
 
     </div> 
 
     </section> 
 
    </div> 
 
    </header> 
 
</section> 
 
<!-- [End] Header Section--> 
 
<!-- [Start] Main Content --> 
 
<main role="main"> 
 
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p> 
 
    <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p> 
 
    <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p> 
 
    <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p> 
 
    <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p> 
 
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p> 
 
    <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p> 
 
    <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p> 
 
    <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p> 
 
    <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p> 
 
    <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Nullam velit nulla, sagittis non massa et, volutpat ullamcorper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in dui quis justo consectetur feugiat et a dui. Integer eget justo eleifend, mattis lectus dictum, fermentum urna. Integer vitae elit non sem vehicula euismod sed non massa. Sed ac lacus tempus, pharetra lectus vel, vehicula felis. Sed pharetra viverra nisi sed euismod.</p> 
 
    <p>Nam sodales, massa non eleifend dignissim, diam felis suscipit eros, at semper diam justo ut arcu. Duis molestie nec nisi a maximus. Vestibulum in congue risus. Suspendisse potenti. Aliquam sodales neque ac pulvinar facilisis. Curabitur a lacinia ante. Mauris tempus risus lorem, vitae fermentum dolor congue in. Fusce at tristique dolor. Etiam pellentesque lectus malesuada risus malesuada luctus. Pellentesque quis quam vulputate, sagittis orci eget, egestas purus. Proin pulvinar felis et risus placerat lacinia.</p> 
 
    <p>In condimentum fermentum efficitur. Mauris non eros ac leo aliquam euismod eget ac metus. Aenean nec eros quis orci eleifend scelerisque. Aliquam finibus vestibulum efficitur. Quisque faucibus id tortor ac gravida. Maecenas eros sapien, mollis eu libero id, faucibus viverra velit. Fusce id blandit quam. Nullam vitae mi lorem. Cras vitae tortor placerat, viverra tellus ut, mattis enim. Aenean sit amet ante tortor. Pellentesque et dignissim urna.</p> 
 
    <p>Morbi in mollis neque, et elementum libero. Sed luctus, metus a posuere tempor, magna ante tempor leo, tempus ultrices nulla est sit amet ipsum. Curabitur bibendum aliquet erat eget interdum. Duis a egestas mi, et molestie lacus. Quisque in lorem nisi. Nulla vestibulum arcu est. Morbi blandit lacinia eleifend.</p> 
 
    <p>Quisque malesuada ex non dui dapibus, vitae pellentesque lacus hendrerit. Pellentesque euismod id elit non auctor. Sed tempus cursus vulputate. Praesent posuere ligula nunc. Fusce libero tellus, semper in justo fringilla, dignissim accumsan nulla. Nunc semper magna metus, sit amet vehicula urna aliquet id. Donec urna sem, pellentesque id justo a, rutrum maximus dui. Fusce vel condimentum purus. Vestibulum ultricies, massa eget aliquet imperdiet, orci quam luctus ante, in ornare tortor dui at lectus. Vivamus eget luctus felis. Sed pretium ornare vulputate. Nam in vulputate nisi. Fusce magna nibh, placerat et nulla eu, vulputate posuere sapien. Suspendisse sagittis enim ut semper efficitur. Fusce dignissim enim sed magna gravida, et pretium erat ultrices. Nulla dui augue, scelerisque vel leo nec, tempor auctor purus. </p> 
 
    
 
    <!-- [End] Main Content --> 
 
</main>