Databases
StackOverflow2013
Postsdbo
POHTML: Having problems creating submenus, how do you create a third level of menus?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML: Having problems creating submenus, how do you create a third level of menus?
    text
    copied!<p>I'm beginning to make a website and I managed to make a navigation bar, with the first set of menus. The second set took awhile, but I managed to make. But now I would like to make a third set of submenu, but I have no idea how. Sort of like this image: <a href="http://vista-buttons.com/vista-skin/images/help/1_3.gif" rel="nofollow">http://vista-buttons.com/vista-skin/images/help/1_3.gif</a>. Where a visitor has the choice to hover their mouse over products > submenu item 1 > submenu item 1_2 Here's what I have:</p> <p>HTML:</p> <pre><code>&lt;div id="nav"&gt; &lt;div id="nav_wrapper"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Menu1&lt;/a&gt;&lt;/li&gt;&lt;li&gt; &lt;a href=""&gt;Menu1&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Menu2&lt;/a&gt; &lt;/li&gt;&lt;/ul&gt;&lt;li&gt; &lt;a href=""&gt;Menu1&lt;/a&gt;&lt;/li&gt;&lt;li&gt; &lt;a href=""&gt;Menu1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div style="z-index:0;left:0;top:0;width:100%;height:100%"&gt; &lt;img src="unknown.jpg" style='width:100%;height:100%'/&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code> body{ padding: 0; margin: 0; overflow-y: scroll; font-family: Arial; font-size: 18px; } #nav{ background-color: #222; } #nav-wrapper{ width: 960px; margin: 0 auto; tex-align: left; } #nav ul{ list-style-type: none; padding: 0; margin: 0; position: relative; } #nav ul li{ display: inline-block; } #nav ul li:hover{ background-color: #333; } #nav ul li a,visited{ color: #ccc; display: block; padding: 15px; text-decoration: none; } #nav ul li a:hover{ color: #ccc; text-decoration: none; } #nav ul li:hover ul{ display: block; } #nav ul ul{ display: none; position: absolute; background-color: #333; border: 5px solid #222; border-top: 0; margin-left: -5px; min-width: 200px; } #nav ul ul li{ display: block; } #nav ul ul li a,visited{ color: #ccc } #nav ul ul li a:hover{ color: #099; } div#nav{ text-align: center; } </code></pre> <p>Sorry if the question is too simple, thank you.</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