Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>There were a number of issues with your Fiddle. First of all, the only element that should be inside a <code>&lt;ul&gt;</code> tag is an <code>&lt;li&gt;</code> tag, not text. Secondly, you were using absolute positioning nearly correctly, but you need to give each li a relative position.</p> <p>I've included a basic (somewhat stripped down) solution for you below. You can also find this at <a href="http://jsfiddle.net/5mWz5/" rel="nofollow">this fiddle</a>.</p> <p>You can reinsert your styles pretty easily I'm sure, perhaps use more classes and less CSS selectors (have you ever used SCSS?)</p> <p><strong>HTML</strong></p> <pre><code>&lt;ul class="menubar"&gt; &lt;li&gt;&lt;a href="#"&gt;menu1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;submenu1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;submenu11&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;submenu12&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;submenu13&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;submenu2 &lt;ul&gt; &lt;li&gt;submenu21&lt;/li&gt; &lt;li&gt;submenu22&lt;/li&gt; &lt;li&gt;submenu23&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;submenu3 &lt;ul&gt; &lt;li&gt;submenu31&lt;/li&gt; &lt;li&gt;submenu32&lt;/li&gt; &lt;li&gt;submenu33&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;menu2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;submenu1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;submenu11&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;submenu12&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;submenu13&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;submenu2 &lt;ul&gt; &lt;li&gt;submenu21&lt;/li&gt; &lt;li&gt;submenu22&lt;/li&gt; &lt;li&gt;submenu23&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;submenu3 &lt;ul&gt; &lt;li&gt;submenu31&lt;/li&gt; &lt;li&gt;submenu32&lt;/li&gt; &lt;li&gt;submenu33&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.menubar, .menubar ul { list-style: none; margin: 0; padding: 0; } .menubar &gt; li { display: inline-block; position: relative; } .menubar li ul { display: none; } .menubar li:hover &gt; ul { display: block; position: absolute; width: 100px; } .menubar li:hover &gt; ul &gt; li { position: relative; } .menubar &gt; li &gt; ul &gt; li ul { position: absolute; top: 0; left: 100px; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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