Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make the sub nav disappear while other sub nav show up while hover
    primarykey
    data
    text
    <p>I setup this main nav: </p> <pre><code>&lt;ul class="menu12"&gt; &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;About&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/"&gt;History&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Team&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Offices&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Services&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/"&gt;Web Design&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Internet&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;testing &amp;gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/"&gt;test 1&lt;/a&gt;&lt;/li&gt; &lt;li class="selected"&gt;&lt;a href="/"&gt;test 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;test 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;testing &amp;gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/"&gt;test 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;test 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;test 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;test 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;test 5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;test 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;test 5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Hosting&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Domain Names&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Broadband&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Contact Us&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="/"&gt;U K&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;France&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;USA&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/"&gt;Australia&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><a href="http://jsfiddle.net/williamdickson/GK8eS/" rel="nofollow">http://jsfiddle.net/williamdickson/GK8eS/</a></p> <p>So for that example is the landing page of item 'test 2'. When you hover any other main items like 'About', or 'contact us', their sub items are overlaying on top of the current items.</p> <p>What I want is when you hover on other 'non-selected' class items, their sub items show up and the current 'selected' item will be disappear. Like how it works on here: <a href="http://jsfiddle.net/williamdickson/2n4hR/" rel="nofollow">http://jsfiddle.net/williamdickson/2n4hR/</a></p> <p>Thank you</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload