title: CSS selector not working?
body: <p>Hey guys, thanks in advance for any help or input. I am having trouble understanding CSS selectors and i have read the docs.. </p>
  
  <p>I am trying to refer to the UL with the id dropdown in my stylesheet. I was under the assumption that i was able to refer to any elements like: </p>
  
  <pre><code>#dropdown ul  
  {
  }
  </code></pre>
  
  <p>This method however does not seem to work :s.. Am i misunderstanding CSS selectors? The elements in my actual code are nested deeper than this structure but i presume the principle is the same? </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;ul id="dropdown"&gt;
        &lt;li class="sub"&gt;&lt;a href="#"&gt;Dropdown&lt;/a&gt;
  
        &lt;!-- Sub Menu --&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;!-- End Submenu --&gt;
  
      &lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt;
  
  
  /* Dropdown Menu */
  #dropdown ul 
  {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #dropdown ul li 
  {
    display: block;
    position: relative;
    float: left;
  }
  
  #dropdown li ul 
  {
     display: none; 
  }
  
  #dropdown ul li a 
  {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
  }
  
  #dropdown ul li a:hover 
  { 
     background: #617F8A; 
  }
  
  #dropdown li:hover ul 
  {
    display: block;
    position: absolute;
  }
  
  #dropdown li:hover li 
  {
    float: none;
    font-size: 11px;
  }
  
  #dropdown li:hover a 
  { 
     background: #617F8A; 
  }
  
  #dropdown li:hover li a:hover 
  { 
     background: #95A9B1; 
  }
  </code></pre>