Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Try this <a href="http://jsfiddle.net/4jVtw/5/" rel="nofollow">http://jsfiddle.net/4jVtw/5/</a></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Horizontal Drop Down&lt;/title&gt; &lt;script type="text/javascript" &gt; // JavaScript Document startList = function() { if (document.all&amp;&amp;document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i&lt;navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; &lt;/script&gt; &lt;style type="text/css"&gt; body { font: 11px verdana; } ul { border-bottom: 1px solid #CCCCCC; list-style: none outside none; margin: 0; padding: 0; width: 150px; } ul li { position: relative; } li ul { display: none; left: 149px; position: absolute; top: 0; } ul li a { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FFFFFF; border-color: #CCCCCC #CCCCCC -moz-use-text-color; border-image: none; border-style: solid solid none; border-width: 1px 1px 0; color: #777777; display: block; padding: 5px; text-decoration: none; } * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } li:hover ul, li.over ul { display: block; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Catalog&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Attribute&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Attribute Group&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    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