On child hover change the css of Parent : <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>
