Databases
StackOverflow2013
Postsdbo
POtwo level menu - second level doesn't appear
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtwo level menu - second level doesn't appear
    text
    copied!<p>I have created two level vertical menu. On mouse over, second level should appear, but it doesn't.</p> <p>The first level menu is ul.side_nav, the second level menu is ul.side_sub_nav. I thought that the following should show second menu on mouse over:</p> <pre><code>.side_nav li:hover&gt;ul.side_sub_nav&gt;li { color: red; display:block; //it was display:none; before } </code></pre> <p>Here is my full code:</p> <pre><code>&lt;ul class="side_nav"&gt; &lt;li class="li_sb "&gt; &lt;a href="index.php?p=subcategories_list&amp;amp;cat=1"&gt;Vie professionnelle&lt;/a&gt; &lt;/li&gt; &lt;ul class="side_sub_nav"&gt; &lt;li&gt;Vie professionnelle - subc2&lt;/li&gt; &lt;li&gt;Vie professionnelle - subc1&lt;/li&gt; &lt;/ul&gt; &lt;li class="li_sm "&gt; &lt;a href="index.php?p=subcategories_list&amp;amp;cat=4"&gt;Administration et droit&lt;/a&gt; &lt;/li&gt; &lt;ul class="side_sub_nav"&gt; &lt;li&gt;Administration et droit - subc1&lt;/li&gt; &lt;li&gt;Administration et droit - subc2&lt;/li&gt; &lt;/ul&gt; &lt;li class="li_sp "&gt; &lt;a href="index.php?p=subcategories_list&amp;amp;cat=5"&gt;Vie pratique&lt;/a&gt; &lt;/li&gt; &lt;ul class="side_sub_nav"&gt; &lt;li&gt;Vie pratique - subc1&lt;/li&gt; &lt;li&gt;Vie pratique - subc2&lt;/li&gt; &lt;/ul&gt; &lt;li class="li_sh "&gt; &lt;a href="index.php?p=subcategories_list&amp;amp;cat=6"&gt;Immobilier et logement&lt;/a&gt; &lt;/li&gt; &lt;ul class="side_sub_nav"&gt; &lt;li&gt;Immobilier et logement - subc1&lt;/li&gt; &lt;li&gt;Immobilier et logement - subc2&lt;/li&gt; &lt;/ul&gt; &lt;/ul&gt; </code></pre> <p>css:</p> <pre><code>.side_nav { list-style-type: none; list-style-image: none; width: 250px; margin-bottom: 37px; } .side_sub_nav { list-style-type: none; list-style-image: none; width: 250px; display: none; } .side_nav li { background-color: #f0f0f0; background-repeat: no-repeat; background-position: 8px center, 232px center; height: 42px; line-height: 42px; border: 1px solid #dddddd; font-size: 16px; padding-left: 45px; cursor: pointer; } .side_sub_nav li { background-color: #008ec9; height: 42px; line-height: 42px; border: 1px solid #dddddd; font-size: 12px; padding-left: 22px; cursor: pointer; color: white; } .side_nav li a, .side_sub_nav li a { text-decoration: none; color: #3f3f3f; } .side_nav li:hover, .side_nav li.active { background-color: #008ec9; } .side_nav li:hover a, .side_nav li.active a { color: white; } .side_nav li:hover&gt;ul.side_sub_nav&gt;li { color: red; display:block; } </code></pre> <p>jsfiddlE: <a href="http://jsfiddle.net/Sggsz/" rel="nofollow">http://jsfiddle.net/Sggsz/</a></p> <p><strong>EDIT:</strong> I need that first and second level menu are displayed one after another. So when second level appears, it should push first level items down.</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