Whenever I hover mouse on that `ul` the `background color` must be changed for both list item `<i>` and `<a>` tags. 

**CSS**

```
.mainlist {
    list-style: none;
    margin-top: 50px;
    margin-left: 15px;
}

.submenu {
    list-style: none;
    display: list-item;
    margin: 0px;
    padding: 0px;
    width: 15px;
}

.submenu li {
    margin-top: 10px;
    float: left;
    display: inline;
    margin: 5px;
    text-align: center;
}

.submenu li i {
    font-size: 25px;
    color: white;
}

.submenu li a {
    margin-top: 20px;
    font-size: 20px;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

```

**HTML**

```
<div style="float:left;margin-left:-250px;width:200px;background-color:dimgray;">
    <nav id="sidenav">
        <ul class="mainlist">
            <ul class="submenu">
                <li><i class="fa fa-home"></i></li>
                <li><a href="#">Home</a></li>
            </ul>
        </ul>
    </nav>
</div>

```

How can I do that? I want something like this:

![enter image description here](https://i.stack.imgur.com/Oni2i.jpg)