Making simple Nested List where sublist appear to side of the main list
<p>I'm trying to make a Simple Nested List which will be some what similar to this Image.In the Image Main list is on Left and if there's any sublist it will appear on the right on mouse over.<img src="http://i.stack.imgur.com/eiCzX.png" alt="sample look"><br>
  the Link to what I'm trying looks like<a href="http://jsfiddle.net/rainbow99984/GDNe8/1/" rel="nofollow"> -sample at jsfiddle you can see </a> Here the Problem I'm facing is<br>
Q1 The Sublist is not easy navigable if you hover from list first to second and to third the whole list will disappear. behavior is not consistent may be because of design.</p>

<p>Q2. In My main page where I have to integrate it,
 it keeps Pushing down all the element below it How can i handle it.</p>

<p>Q3. Right now the list is displayed like normal nested list, any help on making/showing side by side as in attached Image<br>
for reference I'm putting the codes here too.  </p>

<pre><code>&lt;ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;"&gt;
  &lt;li&gt;&lt;span&gt;&lt;em&gt;List&lt;/em&gt;&lt;/span&gt;
      &lt;ul id="liststart" style="display: none;position:absolute;padding:2px 2px 10px 2px;top:20px;left:190px;text-align:justify" class="search-menu"&gt;
        &lt;li&gt; &lt;a&gt;First&lt;/a&gt;
            &lt;ul &gt;
                &lt;li&gt;&lt;a&gt;1.1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;1.2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt; Second
            &lt;ul &gt;
                &lt;li&gt;&lt;a&gt;2.1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;2.2&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt; Third
            &lt;ul &gt;
                &lt;li&gt;3.1&lt;/li&gt;
                &lt;li&gt;3.2&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>Javscript</strong>:</p>

<pre><code>jQuery('#ScatList').hover(function() {
    jQuery('#liststart').show(400);
}, function() {
    jQuery('#liststart').hide();
});
jQuery('#liststart &gt;li').hover(function() {
    jQuery(this).find('ul').show(400);
}, function() {
    jQuery(this).find('ul').hide();
});
jQuery('#liststart &gt;li&gt; ul').hide();
</code></pre>
