jquery menu error displays block rather than inline on click <p>I've created a dropdown menu using jquery, it displays inline which is how i want it to display and then once clicked to display the other options. However once I click on the link it appears to put the LI tag back into blocks.</p> <p>Anyone have any ideas as to why its doing this??</p> <p>HTML</p> <pre><code>&lt;!-- Navigation bar start --&gt; &lt;div id="navbar"&gt; &lt;!-- England nav bar start --&gt; &lt;li id="engmainnav"&gt;&lt;a href="#"&gt;England&lt;/a&gt; &lt;ul id="engsubnav"&gt; &lt;li class="engli"&gt;&lt;? echo $this-&gt;Html-&gt;link('News', array('controller'=&gt;'Premiership', 'action' =&gt;'news')); ?&gt;&lt;/li&gt; &lt;li class="engli"&gt;&lt;? echo $this-&gt;Html-&gt;link('Results/Fixtures', array('controller'=&gt;'Premiership', 'action' =&gt;'resultsfixtures')); ?&gt;&lt;/li&gt; &lt;li class="engli"&gt;&lt;? echo $this-&gt;Html-&gt;link('Teams', array('controller'=&gt;'Premiership', 'action' =&gt;'teams')); ?&gt;&lt;/li&gt; &lt;li class="engli"&gt;&lt;? echo $this-&gt;Html-&gt;link('Table', array('controller'=&gt;'Premiership', 'action' =&gt;'table'));?&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;!-- England nav bar end --&gt; &lt;!-- La liga nav bar start--&gt; &lt;li id="sanav"&gt;&lt;a href="#"&gt;Italy&lt;/a&gt; &lt;ul id="sasubnav"&gt; &lt;li class="sali"&gt;&lt;? echo $this-&gt;Html-&gt;link('News', array('controller'=&gt;'Italy', 'action' =&gt;'news')); ?&gt;&lt;/li&gt;&lt;br/&gt; &lt;li class="sali"&gt;&lt;? echo $this-&gt;Html-&gt;link('Results/Fixtures', array('Italy'=&gt;'Premiership', 'action' =&gt;'resultsfixtures')); ?&gt;&lt;/li&gt;&lt;br/&gt; &lt;li class="sali"&gt;&lt;? echo $this-&gt;Html-&gt;link('Teams', array('controller'=&gt;'Italy', 'action' =&gt;'teams')); ?&gt;&lt;/li&gt;&lt;br/&gt; &lt;li class="sali"&gt;&lt;? echo $this-&gt;Html-&gt;link('Table', array('controller'=&gt;'Seriea', 'action' =&gt;'table'));?&gt;&lt;/li&gt;&lt;br/&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/div&gt; &lt;!-- Navigation bar end --&gt; </code></pre> <p>CSS</p> <pre><code>/* Navigation Style */ #navbar { background-color: #000666; margin: 0px 0px 0px 10px; } #engsubnav { list-style: none; margin:none; display: none; } #sasubnav{ list-style: none; margin:none; display: none; } .engli { margin: 0px 0px 0px -38px; display:block; } li { list-style: none; margin: 0px 0px 0px 10px; display:inline; } ul{ display:inline; } </code></pre> <p>Thanks in advance for any help </p> <p><a href="http://jsfiddle.net/Hm4ns/5/" rel="nofollow">http://jsfiddle.net/Hm4ns/5/</a></p>