Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I'vde made a css-only based dd menu if you're interested...</p> <p>HTML =></p> <pre><code>&lt;!-- by rocky --&gt; &lt;div id="wrapper"&gt; &lt;div id='navMenu'&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Menu1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown2&lt;/a&gt;&lt;/li&gt; &lt;li id="submenu"&gt;&lt;a href="#"&gt;Dropdown3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;!-- End of Menu1--&gt; &lt;/li&gt; &lt;!-- Menu2 --&gt; &lt;li&gt;&lt;a href="#"&gt;Menu2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown2&lt;/a&gt; &lt;/li&gt; &lt;li id="submenu"&gt;&lt;a href="#"&gt;Dropdown2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!-- End Inner UL --&gt; &lt;/li&gt; &lt;!-- ABOUT --&gt; &lt;li&gt;&lt;a href="#"&gt;Menu3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu3&lt;/a&gt;&lt;/li&gt; &lt;li id="submenu"&gt;&lt;a href="#"&gt;Submenu3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;!-- End Inner UL --&gt; &lt;/li&gt; &lt;!-- End main LI --&gt; &lt;/ul&gt; &lt;!-- End main UL --&gt; &lt;/div&gt; &lt;!-- End Nav --&gt; &lt;/div&gt; &lt;!-- End wrapper --&gt; </code></pre> <p>And the CSS:</p> <pre><code>#navMenu { margin: 0; padding: 0; } #navMenu ul{ margin: 0; padding: 0; line-height: 30px; } #navMenu li{ margin: 0; padding: 0; list-style: none; float: left; position: relative; } #navMenu ul li a { text-align: center; text-decoration: none; height: 30px; width: 150px; display: block; color: #000; } #navMenu ul ul { position: absolute; visibility: hidden; top: 30px; } #navMenu ul li:hover ul { visibility: visible; } #navMenu ul li ul a:hover { color: #999; } #navMenu ul ul li#submenu ul { position: absolute; visibility: hidden; top: 30px; } #navMenu ul ul li#submenu:hover ul { margin-top: -30px; margin-left: 105px; visibility: visible; } </code></pre> <p>There is a demo here: <a href="http://dbwebb.se/style/?id=152" rel="nofollow">http://dbwebb.se/style/?id=152</a></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