Databases
StackOverflow2013
Postsdbo
POWhy does omitting this "li" CSS selector affect the applied style?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does omitting this "li" CSS selector affect the applied style?
    text
    copied!<p>The code goes like this,</p> <pre><code>&lt;style type="text/css"&gt; #nav, .nav, #nav .nav li { margin:0px; padding:0px; } #nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;} li, li a {color:#000; text-decoration:none;} #nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;} #nav li a {display:block; width:inherit; height:inherit;} ul.nav { display:none; } #nav li:hover &gt; a, #nav li:hover { color:#fff; background:#000; } #nav li ul.first {left:-1px; top:100%;} li:hover &gt; .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; } li:hover { position:relative; z-index:2000; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="nav"&gt; &lt;li&gt;Menu 1 &lt;ul class="nav first"&gt; &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Menu 2&lt;/li&gt; &lt;li&gt;Menu 3&lt;/li&gt; &lt;li&gt;Menu 4&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Menu 2&lt;/li&gt; &lt;li&gt;Menu 3&lt;/li&gt; &lt;li&gt;Menu 4&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; </code></pre> <p>On the third element at the <code>"li, li a"</code> part, If I remove the <code>"li"</code> selector leaving only the <code>"li a"</code>, what happens is, when I hover at my first level list items, the second list items appear, but the text doesn't, I don't know if it's a background influence, or a text influence, because I can't find what influences my 2nd level lists!</p> <p>Oh and by the way, the first menu called "Menu 1" under the first level list item, is visible, I think its because of the "li a" selector, but as for the part where that I deleted, I don't know how it works, can someone tell me what's causing this trouble when I delete it?</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