title: How to separate child element from parent in css?
body: <p>I'm triying to combine these two menus:
  <a href="http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/" rel="nofollow">http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/</a>
  <a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/" rel="nofollow">http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/</a></p>
  
  <p>The first one will stay unchanged and the submenu in the second one will be used with it. But as i begin to change the css code and make these to merge, i always encounter a particular error. The "ul,li and a" properties of the "responsive-retina-ready-menu" effects the submenu that i take from "overlay-effect-menu" and i can not separate these properties. I mean it shows the submenu as it has the same style with the main menu. What can i do about it?</p>
  
  <p>The one i have:</p>
  
  <pre><code>&lt;div class="main clearfix"&gt;
                  &lt;nav id="menu" class="nav"&gt;                 
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt;
                                      &lt;i aria-hidden="true" class="icon-home"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 1&lt;/span&gt;
                              &lt;/a&gt;&lt;div class="cbp-hrsub"&gt;
  
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt; 
                                      &lt;i aria-hidden="true" class="icon-services"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 2&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt;
                                      &lt;i aria-hidden="true" class="icon-portfolio"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 3&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt;
                                      &lt;i aria-hidden="true" class="icon-blog"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 4&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt;
                                      &lt;i aria-hidden="true" class="icon-team"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 5&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt;
                                      &lt;i aria-hidden="true" class="icon-contact"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 6&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt;
                                      &lt;i aria-hidden="true" class="icon-contact"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 7&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;span class="icon"&gt;
                                      &lt;i aria-hidden="true" class="icon-contact"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span&gt;Menu 8&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The one i want:</p>
  
  <pre><code>&lt;div class="main clearfix"&gt;
          &lt;nav id="menu" class="nav"&gt;                 
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt;
                              &lt;i aria-hidden="true" class="icon-home"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 1&lt;/span&gt;
                      &lt;/a&gt;&lt;div class="cbp-hrsub"&gt;
                          &lt;div class="cbp-hrsub-inner"&gt; 
                              &lt;div&gt;
                                  &lt;h4&gt;Learning &amp;amp; Games&lt;/h4&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Catch the Bullet&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Snoopydoo&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Fallen Angel&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Sui Maker&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Wave Master&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Golf Pro&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;h4&gt;Utilities&lt;/h4&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Gadget Finder&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Green Tree Express&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Green Tree Pro&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Wobbler 3.0&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Coolkid&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;h4&gt;Education&lt;/h4&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Learn Thai&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Math Genius&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Chemokid&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;h4&gt;Professionals&lt;/h4&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Success 1.0&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Moneymaker&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;&lt;!-- /cbp-hrsub-inner --&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt; 
                              &lt;i aria-hidden="true" class="icon-services"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 2&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt;
                              &lt;i aria-hidden="true" class="icon-portfolio"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 3&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt;
                              &lt;i aria-hidden="true" class="icon-blog"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 4&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt;
                              &lt;i aria-hidden="true" class="icon-team"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 5&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt;
                              &lt;i aria-hidden="true" class="icon-contact"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 6&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt;
                              &lt;i aria-hidden="true" class="icon-contact"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 7&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;
                          &lt;span class="icon"&gt;
                              &lt;i aria-hidden="true" class="icon-contact"&gt;&lt;/i&gt;
                          &lt;/span&gt;
                          &lt;span&gt;Menu 8&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>