Separate activation of <span> inside <li> of JQuery Menu
<p>I was wondering If I can have a separate element(<code>&lt;span&gt;</code>) on a <code>&lt;li&gt;</code> using JQuery Menu, as the default style is always activating the entire <code>&lt;li&gt;</code>
and what I need to have is to only activate the <code>&lt;span&gt;</code> being hover/focus by the user. Is this possible or can anyone guide me on where should start?</p>

<pre><code>&lt;ul id="menu"&gt;
  &lt;li&gt;A&lt;/li&gt;
  &lt;li&gt;B
    &lt;ul&gt;
      &lt;li&gt;&lt;span&gt;B - 1.1&lt;/span&gt;&lt;span&gt;B - 1.2&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;B - 2.1&lt;/span&gt;&lt;span&gt;B - 2.2&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;C&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>See <a href="https://jsfiddle.net/9a8k3bxa/1/" rel="nofollow">Fiddle Demo</a> activates <code>B - 1.1</code> and <code>B - 1.2</code>  simultaneously.</p>