Entire Box As Link - html

Question

Essentially, I'm trying to get the entire box to be a link and when you hover over it, the entire box also changes colors. I know this is easily done if I write separate code for each "li" tag but that would be timely. Is there something I'm doing wrong?
Here is my code:
.genrelist li {
float: left;
text-transform: uppercase;
font-weight: bolder;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
margin: 50px;
background: #fff;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
.genrelist li:hover {
float: left;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
background: #000;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
<ul>
<li><span>Fiction Short Stories</span></li>
<li><span>Non-Fiction Short Stories</span></li>
<li><span>Comic Strips</span></li>
<li><span>Poetry</span></li>
<li><span>Biblical</span></li>
<li><span>Inspirational</span></li>
<li><span>Children's Corner</span></li>
<li><span>Comedy</span></li>
<li><span>Drama</span></li>
<li><span>Chiller</span></li>
<li><span>Romance</span></li>
<li><span>Science Fiction</span></li>
<li><span>Memoirs</span></li>
<li><span>In The Feathers</span></li>
</ul>
They all work when you hover over the word, but only the first item works when you hover over any part of it's box. Any help is appreciated!

Answer 1

a needs to be wrapped into li to valid your HTML structure, then displayed as block.
A pseudo element can be used to help vertical-align your span.
display:flex; could be used too to center a content.
Demo using pseudo-element
li {
float: left;
text-transform: uppercase;
font-weight: bolder;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
margin: 50px;
background: #fff;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
li:hover {
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
background: #000;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
li a {
display:block ;
height:100%;
width:100%;}
a:before {
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
a span {
display:inline-block;
max-width:99%;
}
<ul>
<li><span>Fiction Short Stories</span></li>
<li><span>Non-Fiction Short Stories</span></li>
<li><span>Comic Strips</span></li>
<li><span>Poetry</span></li>
<li><span>Biblical</span></li>
<li><span>Inspirational</span></li>
<li><span>Children's Corner</span></li>
<li><span>Comedy</span></li>
<li><span>Drama</span></li>
<li><span>Chiller</span></li>
<li><span>Romance</span></li>
<li><span>Science Fiction</span></li>
<li><span>Memoirs</span></li>
<li><span>In The Feathers</span></li>
</ul>