title: On child hover change the css of Parent
body: <p>I want to change the css of parent on hover of Child element.</p>
  
  <pre><code>&lt;ul id="main-menu"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;i class="fa fa-building-o" aria-hidden="true"&gt;&lt;/i&gt;
                  Private Limited
                  &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
              &lt;/a&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;a href="#0"&gt;Company&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#0"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#0"&gt;Industry&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;&lt;/ ul&gt;
  </code></pre>
  
  <p>What i want is if i hover on li of <strong>submenu</strong>, li of <strong>main-menu</strong> get highlighted.</p>