Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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