CSS only collapsible list - list items overflow <ul>

Question

I have this collapsible list created with css only, but somehow the list items overflow the <ul> element when it's opened. What do I need to do in order to fix this?

Html:

 .linkslist { position: relative; background-color: #fff; } .linkslist .menu-trigger { display: block; cursor: pointer; padding: 5px; border: 1px solid #ddd; } .linkslist input[type="checkbox"] { position: absolute; left: -9999px; } .linkslist input[type="checkbox"]+label::after { font-size: 14px; font-weight: 700; color: initial; font-weight: normal; margin-right: 5px; right: 10px; top: 50%; position: absolute; text-decoration: none; display: inline-block; content: '+'; transform: translateY(-50%); } .linkslist input[type="checkbox"]:checked+label::after { content: '-'; } .linkslist .menu-list { list-style: none; padding-left: 0; margin-top: 0; } .linkslist input[type="checkbox"]~ul.menu-list { height: 0; transform: scaleY(0); } .linkslist input[type="checkbox"]:checked~ul.menu-list { border: 1px solid #f90; /* For testing */ margin-top: -1px; position: absolute; top: 100%; left: 0; z-index: 180; width: 100%; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); height: 100%; transform-origin: top; transition: transform .2s ease-out; transform: scaleY(1); } .linkslist .list-group-item { position: relative; display: block; padding: 9px 7px; margin-left: 0 !important; margin-bottom: -1px; background-color: #fff; border: 1px solid #ccc; } .linkslist .list-group-item a { color: inherit; display: block; } 

 <div class="linkslist"> <input type="checkbox" id="list-item"> <label for="list-item" class="menu-trigger">Select</label> <ul class="list-group menu-list"> <li class="list-group-item"><a href="https://www.google.com" title="Google">Google</a></li> <li class="list-group-item"><a href="https://www.bbc.co.uk" title="Go to BBC">BBC</a></li> <li class="list-group-item"><a href="https://www.facebook.com" title="Go to Facebook">Facebook</a></li> </ul> </div> 

See Fiddle here .

Thanks in advance.

Answer 1

Position absolute element take height as par parent relative element. Instead of height:100% set it to height:auto to fix this. Check updated snippet below..

 .linkslist { position: relative; background-color: #fff; } .linkslist .menu-trigger { display: block; cursor: pointer; padding: 5px; border: 1px solid #ddd; } .linkslist input[type="checkbox"] { position: absolute; left: -9999px; } .linkslist input[type="checkbox"]+label::after { font-size: 14px; font-weight: 700; color: initial; font-weight: normal; margin-right: 5px; right: 10px; top: 50%; position: absolute; text-decoration: none; display: inline-block; content: '+'; transform: translateY(-50%); } .linkslist input[type="checkbox"]:checked+label::after { content: '-'; } .linkslist .menu-list { list-style: none; padding-left: 0; margin-top: 0; } .linkslist input[type="checkbox"]~ul.menu-list { height: 0; transform: scaleY(0); } .linkslist input[type="checkbox"]:checked~ul.menu-list { border: 1px solid #f90; /* For testing */ margin-top: -1px; position: absolute; top: 100%; left: 0; z-index: 180; width: 100%; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); height: auto; transform-origin: top; transition: transform .2s ease-out; transform: scaleY(1); } .linkslist .list-group-item { position: relative; display: block; padding: 9px 7px; margin-left: 0 !important; margin-bottom: -1px; background-color: #fff; border: 1px solid #ccc; } .linkslist .list-group-item a { color: inherit; display: block; } 

 <div class="linkslist"> <input type="checkbox" id="list-item"> <label for="list-item" class="menu-trigger">Select</label> <ul class="list-group menu-list"> <li class="list-group-item"><a href="https://www.google.com" title="Google">Google</a></li> <li class="list-group-item"><a href="https://www.bbc.co.uk" title="Go to BBC">BBC</a></li> <li class="list-group-item"><a href="https://www.facebook.com" title="Go to Facebook">Facebook</a></li> </ul> </div> 

Answer 2

try this

remove .linkslist .list-group-item{ margin-bottom:-1px } and height:inherit from .linkslist input[type="checkbox"]:checked~ul.menu-list

 .linkslist { position: relative; background-color: #fff; } .linkslist .menu-trigger { display: block; cursor: pointer; padding: 5px; border: 1px solid #ddd; } .linkslist input[type="checkbox"] { position: absolute; left: -9999px; } .linkslist input[type="checkbox"]+label::after { font-size: 14px; font-weight: 700; color: initial; font-weight: normal; margin-right: 5px; right: 10px; top: 50%; position: absolute; text-decoration: none; display: inline-block; content: '+'; transform: translateY(-50%); } .linkslist input[type="checkbox"]:checked+label::after { content: '-'; } .linkslist .menu-list { list-style: none; padding-left: 0; margin-top: 0; } .linkslist input[type="checkbox"]~ul.menu-list { height: 0; transform: scaleY(0); } .linkslist input[type="checkbox"]:checked~ul.menu-list { border: 1px solid #f90; margin-top: -1px; position: absolute; top: 100%; left: 0; z-index: 180; width: 100%; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); height: inherit; transform-origin: top; transition: transform .2s ease-out; transform: scaleY(1); } .linkslist .list-group-item { position: relative; display: block; padding: 9px 7px; margin-left: 0 !important; /* margin-bottom: -1px;*/ background-color: #fff; border: 1px solid #ccc; } .linkslist .list-group-item a { color: inherit; display: block; } body { padding: 20px; } 

 <div class="linkslist"> <input type="checkbox" id="list-item"> <label for="list-item" class="menu-trigger">Select</label> <ul class="list-group menu-list"> <li class="list-group-item"><a href="https://www.google.com" title="Google">Google</a></li> <li class="list-group-item"><a href="https://www.bbc.co.uk" title="Go to BBC">BBC</a></li> <li class="list-group-item"><a href="https://www.facebook.com" title="Go to Facebook">Facebook</a></li> </ul> </div>