What element is causing my accordion to have spaces? - html

Question

I'm working on my final project for my HTML/CSS class. I'm trying to (potentially over ambitious) create a collapsible accordion style menu. I've managed to get it hid and only show up with a hover, but for some reason, there is an element causing the boxes to have spaces between them, and I'm unsure how to contain the text in the boxes. Thank you in advance for any ideas you have!
Screenshot:
How to remove the area with the red background?
EDIT: Sorry first time posting here, wasn't sure how much code to post.
HTML Code
#charset "utf-8";
/* HTML Styles */
/*Body Styles*/
html {
background-image: url(../images/sushi_wallpaper.jpeg);
}
body {
display:block;
width: 100%;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
background-color: white;
border: 7px solid rgb(149,54,0);
border-top: none;
border-bottom: none; /* BODY BORDER, RE-ADDRESS WITH COLORS */
position: static;
border-collapse: collapse;
}
/*Navigation Styles*/
nav {
font-family: 'Times New Roman', serif;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav.horizontalnavigation li {
/*BUTTON SIZES */
display: block;
float: left;
width: 25%;
text-decoration: none;
line-height: 2;
padding-bottom: 1em;
}
nav.horizontalnavigation li a:hover {
background-color:rgb(255,198,73);
}
/* COLLAPSE ABLE MENU */
ul.collapse {
display: none;
}
a.accord:hover+ul.collapse, ul.collapse:hover {
display: block;
float: left;
width: 100%;
}
.collapse > .submenu {
width: 100%;
background-color: red; }
ul.collapse li {
width: 80%;
float: right;
border: none;
line-height: initial;
}
nav.horizontalnavigation > ul > li:hover:nth-of-type(4):after {
text-decoration: underline;
content: #collapse;
}
nav.horizontalnavigation > ul > li:target {
display: block;
}
nav.horizontalnavigation a {
/*"BUTTONS" STYLES HERE */
display: block;
color: black;
text-decoration: none;
background-color: white;
border: 3px solid rgb(149,54,0);
box-shadow: 0 0 1em .3em rgb(255,198,73) inset;
}
/* Header Styles */
h1 {
font-family: 'Times New Roman', Times, serif;
font-size: 2.2em;
font-weight: normal;
margin: 0.5em 0;
}
/*Font Styles */
#font-face {
font-family: speedingBrush;
src: url("../fonts/SpeedingBrush.ttf") format("truetype");
}
cite {
font-style: italic;
}
/* Paragraph Styles */
p {
display:block;
font-size: 1em;
line-height: 1.375;
text-indent: 8%;
}
/*Images Styles*/
body > header > img.banner {
display:block;
width: 100%;
}
/* DIV & Section Styles */
/*List Styles */
/*Footer Styles*/
footer {
display: block;
text-align: center;
width: 100%;
border: 2px solid rgb(149,54,0);
line-height: 2;
margin-top: 15em;
clear: both;
}
<nav class="horizontalnavigation">
<ul>
<li>Popular Types of Sushi</li>
<li>Where can I get sushi?</li>
<li>FREE Sushi Catalog</li>
<li>Additional Resources
<ul class="collapse">
<li class="submenu">WWWWWWWWWWWWWWW</li>
<li class="submenu">WWWWWWWWWWWWWWWWWWWWWWWWW</li>
<li class="submenu">WWWWWWWWWWWW</li>
</ul>
</li>
</ul>
</nav>

Answer 1

Just add
ul.collapse li.submenu{
padding: 0;
}

Answer 2

Remove padding-bottom: 1em; and it will solve your issue.
nav.horizontalnavigation li {
/*BUTTON SIZES */
display: block;
float: left;
width: 25%;
text-decoration: none;
line-height: 2;
padding-bottom: 1em; // <----- This is causing the spacing
}