Vertically aligned fixed-height multi-line list item with hover behavior for entire item (not just text)
<p>I have a menu and need the following behavior:</p>

<p>When hovering over a list item (not just the text), the background should change color and the text turn white. (works only on single-line). Sitewide, all spans have the color set and I cannot change (included at top of css) so I need to overwrite it for just this menu.</p>

<p>I have found similar questions but haven't found anything that covers this specifically.</p>

<p>HTML</p>

<pre><code>&lt;ul id="navbar"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Line 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Line 2 &lt;br&gt;Line 2 - 2nd Row&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Line 3&lt;br&gt;Line 2 - 2nd Row&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Line 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>CSS</p>

<pre><code>span {
  color: #feb800;
}

#navbar {
  height: 105px;
  line-height: 105px;
  vertical-align: middle;
}

ul#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  padding-left: 0;
  font-size: 0; // remove whitespace to prevent extra space before list item
}

#navbar li {
  float: none;
  display: inline-block;
  width: 25%;
  text-transform: uppercase;
  vertical-align: middle;
}

#navbar li {
  border-right: 2px solid #feb800;
}

#navbar li:last-child {
  border-right: none;
}

#navbar a {
  display: block;
  color: #feb800;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}

#navbar a {
  height: 105px;
}

#navbar a:hover {
  background-color: #feb800;
  color: #ffffff;
}

#navbar a span {
  line-height: normal;
  vertical-align: middle;
  display: inline-block;
}

#navbar a span:hover {
  color: #ffffff;
}
</code></pre>