How to separate child element from parent in css? - css

Question

I'm triying to combine these two menus:
http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
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?
The one i have:
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>
The one i want:
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>

Answer 1

Like I mentioned in my comments you need to specify the styles of parent and children elements separately.
For example, in order to set list-style:none to parent uls you need the following CSS selector:
ul {
list-style:none;
}
To keep the default styling to children uls, you need to add the following selector after the previous one:
ul ul {
list-style:disc;
}
Here's a demo based on the HTML given in OP with minimal styling but illustrating the way you can style parent and child elements separately. (Note: Hover on Menu 1)