The tabs in my menu seem to be refusing to move closer to the left side of the menu. I've tried removing padding elements and adjusting other settings, but there still remains an awkward space between the edge of the menu and the tab text.
Additionally, I want the dropdown to have padding only around the parent tab, not the child tabs inside. The current project can be viewed on the left side here, and the desired outcome is shown on the right side in this image.
ul{list-style:none;}
a{ text-decoration: none;color: black;}
.ul-li {position: relative;}
ul li {padding:10px;}
.ul-li > .ul-li-ul {max-height: 0;transform: scaleY(0);}
.ul-li > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.ul-li > input[type="checkbox"]:checked ~ .ul-li-ul {
max-height: 9999px;
display: block;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
...
(remaining code snippets omitted for brevity)