Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Ok... First things first. Tables are a definite no and you don't need jQuery either. </p> <p>You have four html elements that combined are designed to do this specific task. </p> <p>These are <code>&lt;nav&gt;</code>, <code>&lt;ul&gt;</code> <code>&lt;li&gt;</code> and <code>&lt;a&gt;</code>. Now I'm making an assumption here that since you want it to work on all screen sizes then you are wanting this to be responsive, I'm also assuming that since you want rounded corners, gradients, shadows etc then you will be aiming for modern browsers, ie9+ and the others.</p> <p>Bearing that in mind here would be the html I would use to create a menu.</p> <pre><code>&lt;nav&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;item 1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;item 2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;item 3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;sub item 1&lt;/a&gt;&lt;li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>The css would go something like this. Please note that I have only created a very rough approximation of what you are after. </p> <pre class="lang-css prettyprint-override"><code>body{ /* Set the overall font*/ font-family:arial, serif; } /* Contain floats: h5bp.com/q */ nav &gt; ul:before, nav &gt; ul:after { content: ""; display: table; } nav &gt; ul:after { clear: both; } nav &gt; ul { *zoom: 1; } /* Level one */ nav &gt; ul &gt; li { float:left; position:relative; overflow:visible; width:30%; max-width:100px; } nav &gt; ul &gt; li &gt; a{ padding:.5em 1em; } /* Level 2*/ nav &gt; ul &gt; li &gt; ul { background:#666; border-radius: 0 5px 5px 5px; position:absolute; z-index:1; padding:1em; width:200px; /*set to whatever you need*/ display:none; } /* Second list on level 2*/ nav &gt; ul &gt; li:nth-child(2) &gt; ul{ margin-left:-50%; border-radius: 5px; } /* Last list on level 2*/ nav &gt; ul &gt; li:last-child &gt; ul{ right:0; border-radius: 5px 0 5px 5px; } /* Hover level 1*/ nav &gt; ul &gt; li:hover { background:#666; border-radius: 5px 5px 0 0; color:#fff; } nav &gt; ul &gt; li:hover &gt; ul { display:block; } nav &gt; ul &gt; li:hover &gt; a, nav &gt; ul &gt; li &gt; ul a{ color:#fff; } nav a { text-decoration:none; display:block; } </code></pre> <p>I've included a working example <a href="http://jsfiddle.net/QJppp/" rel="nofollow">here</a> for you to play with. As you can see this will work from mobile-up. Fullscreen link <a href="http://jsfiddle.net/QJppp/embedded/result/" rel="nofollow">here</a> resize to see it working.</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