Меню для сайту в стилі акордеона

class="Ac-container"gt;lt;divgt;lt;input id="Ac-1" name="Accordion-1" type="Checkbox" /gt;lt;label for="Ac-1"gt; Головнаlt;/labelgt;class="Ac-small"gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallisdiam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aeneannon mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, noneuismod neque.lt;/pgt;lt;/articlegt;lt;/divgt;lt;divgt;lt;input id="Ac-2" name="Accordion-1" type="Checkbox" /gt;lt;label for="Ac-2"gt; Про автораlt;/labelgt;class="Ac-medium"gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallisdiam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aeneannon mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, noneuismod neque.lt;/pgt;lt;/articlegt;lt;/divgt;lt;divgt;lt;input id="Ac-3" name="Accordion-1" type="Checkbox" /gt;lt;label for="Ac-3"gt; Статтіlt;/labelgt;class="Ac-large"gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallisdiam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aeneannon mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, noneuismod neque.lt;/pgt;lt;/articlegt;lt;/divgt;lt;divgt;lt;input id="Ac-4" name="Accordion-1" type="Checkbox" /gt;lt;label for="Ac-4"gt; Контактиlt;/labelgt;class="Ac-large"gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo nisi. Donec pulvinar erat a enim scelerisque, non convallisdiam vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at odio nisl. Aeneannon mauris non neque fermentum tempor. Aliquam euismod libero ultricies adipiscing vulputate. Vivamus sit amet posuere purus, noneuismod neque.lt;/pgt;lt;/articlegt;lt;/divgt;lt;/sectiongt;

.ac-container {width: 400px-margin: 10px auto 30px auto-text-align: left-}.ac-container label {font-family: `BebasNeueRegular`, `Arial Narrow`, Arial, sans-serif-padding: 5px 20px-position: relative-z-index: 20-display: block-height: 30px-cursor: pointer-color: # 777-text-shadow: 1px 1px 1px rgba(255,255,255,0.8)-line-height: 33px-font-size: 19px-background: #ffffff-background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%)-background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea))-background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%)-background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%)-background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%)-background: linear-gradient(top, #ffffff 1%,#eaeaea 100%)-filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffffff `, endColorstr=`#eaeaea`,GradientType=0 )-box-shadow:0px 0px 0px 1px rgba(155,155,155,0.3),1px 0px 0px 0px rgba(255,255,255,0.9) inset,0px 2px 2px rgba(0,0,0,0.1)-}.ac-container label: hover {background: #fff-}.ac-container input: checked + label,.ac-container input: checked + label: hover {background: # c6e1ec-color: # 3d7489-text-shadow: 0px 1px 1px rgba(255,255,255, 0.6)-box-shadow:0px 0px 0px 1px rgba(155,155,155,0.3),0px 2px 2px rgba(0,0,0,0.1)-}.ac-container label: hover: after,.ac-container input: checked + label: hover: after {content: ``-position: absolute-width: 24px-height: 24px-right: 13px-top: 7px-background: transparent url(../images/arrow_down.jpg) no-repeat center center-}.ac-container input: checked + label: hover: after {background-image: url(../images/arrow_up.jpg)-}.ac-container input {display: none-}.ac-container article {background: rgba(255, 255, 255, 0.5)-margin-top: -1px-overflow: hidden-height: 0px-position: relative-z-index: 10--webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear--moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear--o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear--ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear-transition: height 0.3s ease-in-out, box-shadow 0.6s linear-}.ac-container article p {font-style: italic-color: # 777-line-height: 23px-font-size: 14px-padding: 20px-text-shadow: 1px 1px 1px rgba(255,255,255,0.8)-}.ac-container input:checked ~ article {-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear--moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear--o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear--ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear-transition: height 0.5s ease-in-out, box-shadow 0.1s linear-box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3)-}.ac-container input:checked ~ article.ac-small {height: 140px-}.ac-container input:checked ~ article.ac-medium {height: 180px-}.ac-container input:checked ~ article.ac-large {height: 230px-}