How to dynamically append li to ul?

What does "ul#menu li ul.sub-menu {" mean?

• Answer:

  You see two things: 1. A CSS selector: ul#menu li ul.sub-menu 2. An opening (curly) brace {, which should be followed by zero or more css declarations, and a closing brace }. The CSS selector determines to which elements the CSS declarations ("styles" from now on) are applied to. The easiest way to understand the CSS selector is to read its individual components from right to left. To start with, the styles only apply to ul elements with class "sub-menu". I.e. you'd see something like <ul class="sub-menu"> in the HTML. Furthermore, it only applies to those ul elements which appear somewhere nested inside a li element. Those li elements in turn need to be nested inside an ul element with id "menu", i.e. something like <ul id="menu"> An example of what is matched: <ul id="menu"> <li> <ul class="sub-menu">THIS IS MATCHED</ul> </li> </ul> The selector in fact matches many more types of element hierarchies, because both <li> and <ul class="sub=menu"> may appear anywhere, deeply nested. They do not have to be direct children of their parent element. For example this would be matched too: <ul id="menu"> <li> <div> <ul class="sub-menu">THIS IS MATCHED</ul> </div> </li> </ul> The specified styles are applied to the element that is matched. However, some styles (for example font-size or font-color) are inherited by child elements from their parent element, so setting a different font-size or color on the ul will affect any child elements (likely li elements) and all their descendants as well.