Add active state to <li> tag
<p>I am not sure if this is possible. If not I could add an data-state or class, right?</p>

<p>Ok so my first question is... How can I add an active state on hover of <code>&lt;li&gt;</code> and remove it from previously hovered tag if new one is selected. I assume I need to use siblings for that but how do I make it go to :active I have no clues. If it's not possible any option from above seems fine... I just wanna learn how.</p>

<pre><code>#menubar li {
    background: rgba(20, 20, 20, .3);
    margin: 10px 0;
    padding: 5px 0;
    width: 50%;
    cursor: pointer;
}

#menubar li:active {
    width: 100%;
}


&lt;ul id="menubar"&gt;
    &lt;li&gt;&lt;a href="head.php"&gt;Head&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="body.php"&gt;Body&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="settings.php"&gt;Settings&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;None&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;None&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;!-- menubar CLOSE --&gt;
</code></pre>

<p>so as mentioned im not sure if it is possible to add active state to <code>&lt;li&gt;</code> but still I need to ask.</p>

<p>If not something like this is more then welcome.</p>

<pre><code>&lt;li data-state="active"&gt;&lt;/li&gt;
</code></pre>

<p>or</p>

<pre><code>&lt;li class="activeItem"&gt;&lt;/li&gt;
</code></pre>
