Hover function does not work in CSS Side Bar - html

Question

I have written code for an HTML/CSS website sidebar, and I want to make sure that when a user hovers over an element in the sidebar, its background gets highlighted.
It just displays my normal list and the hover function does not work. What is the problem?
body {
margin: 0;
}
.sidebar {
float: right;
background-color: #F4ECFC;
/* Sidebar Background */
width: 200px;
/* Width of side bar */
height: 900px;
padding-top: 0px;
/* Padding above the header */
font-family: helvetica;
/* Font for the sidebar */
}
.sidebar a {
text-decoration: none;
/* Removes the underline from links. */
color: #0B0036;
/* Text color of the menu items */
}
.sidebar ul {
line-height: 40px;
overflow: hidden;
margin-left: 0;
padding-left: 0;
}
.sidebar ul li .listItemA {
/* list-style-type: none; */
background-color: #F4ECFC;
/* Background colour of the menu items. */
}
.sidebar ul li .listItemA a:hover {
background-color: purple;
}
.listItemA {
text-align: center;
}
<div class="sidebar">
<ul>
<li class="listItemA">Class1</li>
<li class="listItemA">Class2</li>
<li class="listItemA">Class3</li>
<li class="listItemA">Class4</li>
<li class="listItemA">Class5</li>
</ul>
</div>

Answer 1

One thing you want to do first is give your links display: block; which makes them take up 100% of the width available.
Then simplify the style of the link and the relative hover like so:
.sidebar ul .listItemA {
/* list-style-type: none; */
background-color: #F4ECFC;
/* Background colour of the menu items. */
}
.sidebar ul .listItemA:hover a {
background-color: purple;
}
As pointed out in a comment on your question you had a space between li and .listItemA, I just removed li to achieve the correct selector but you could've also changed that part of the selector to li.listItemA.
Really important change here is to style the link on hover of the list item:
.sidebar ul .listItemA:hover a { ... }
This tells the browser to change the background of the link when the list item is hovered.
body {
margin: 0;
}
.sidebar {
float: right;
background-color: #F4ECFC;
/* Sidebar Background */
width: 200px;
/* Width of side bar */
height: 900px;
padding-top: 0px;
/* Padding above the header */
font-family: helvetica;
/* Font for the sidebar */
}
.sidebar a {
display: block;
text-decoration: none;
/* Removes the underline from links. */
color: #0B0036;
/* Text color of the menu items */
}
.sidebar ul {
line-height: 40px;
overflow: hidden;
margin-left: 0;
padding-left: 0;
}
.sidebar ul .listItemA {
/* list-style-type: none; */
background-color: #F4ECFC;
/* Background colour of the menu items. */
}
.sidebar ul .listItemA:hover a {
background-color: purple;
}
.listItemA {
text-align: center;
}
<div class="sidebar">
<ul>
<li class="listItemA">Class1</li>
<li class="listItemA">Class2</li>
<li class="listItemA">Class3</li>
<li class="listItemA">Class4</li>
<li class="listItemA">Class5</li>
</ul>
</div>