Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<pre><code>&lt;ul class="myMenu"&gt; &lt;li&gt;&lt;a href="#"&gt;menu item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;menu item 2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;menu item 3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;sub menu item 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;menu item 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;menu item 5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; Now we're going to style the list with css: /*style the main menu*/ .myMenu { margin:0; padding:0; } .myMenu li { list-style:none; float:left; font:12px Arial, Helvetica, sans-serif #111; } .myMenu li a:link, .myMenu li a:visited { display:block; text-decoration:none; background-color:#09F; padding: 0.5em 2em; margin:0; border-right: 1px solid #fff; color:#111; } .myMenu li a:hover { background-color:#0CF; } /*style the sub menu*/ .myMenu li ul { position:absolute; visibility:hidden; border-top:1px solid #fff; margin:0; padding:0; } .myMenu li ul li { display:inline; float:none; } .myMenu li ul li a:link, .myMenu li ul li a:visited { background-color:#09F; width:auto; } .myMenu li ul li a:hover { background-color:#0CF; } &lt;script type="text/javascript"&gt; $(document).ready(function() { $('.myMenu &gt; li').bind('mouseover', openSubMenu); $('.myMenu &gt; li').bind('mouseout', closeSubMenu); function openSubMenu() { $(this).find('ul').css('visibility', 'visible'); }; function closeSubMenu() { $(this).find('ul').css('visibility', 'hidden'); }; }); &lt;/script&gt; </code></pre> <p>Here you go.</p>
 

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