title: Background color change on hover for ul in html
body: <p>Whenever I hover mouse on that <code>ul</code> the <code>background color</code> must be changed for both list item <code>&lt;i&gt;</code> and <code>&lt;a&gt;</code> tags. </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="float:left;margin-left:-250px;width:200px;background-color:dimgray;"&gt;
      &lt;nav id="sidenav"&gt;
          &lt;ul class="mainlist"&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I do that? I want something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Oni2i.jpg" alt="enter image description here"></p>