I'm developing a page that has a menu that should display different behaviors according to the dimensions of the screen. I'll try to display this through some images.
In the initial menu state (and with a screen dimension whose width is greater than 1000px) I should display the following structure:
ThePersonal,BusinessandGovernmentlinkshavesublinksthatwillbedisplayedthroughthepseudo-class:hover,asyoucanseeinthefollowingimage: 
Ihavenoproblemwiththisstructure.TheproblemIfaceconcernsthestylesthatshouldbeloadedwhenthescreenwidthislessthan700px.WhathappensisthatinsteadofdisplayingthePersonal,BusinessandGovernmentitems,Ishouldonlydisplayalinkcalled"Categories":
Thehoverinthe"Categories" link should expand all the menus below, as you can see in the image below:
Myinitialstructureisasfollows:
*{
list-style: none;
}
nav{
width: 100%;
}
nav ul li{
float: left;
}
nav ul li a{
padding: 10px;
}
nav ul li ul{
display: none;
position: absolute;
}
nav ul li ul li{
float: left;
}
nav ul li ul li ul li{
clear: left;
}
nav ul li ul li ul li a{
color: #000;
}
nav ul li:hover ul{
display: block;
}<nav>
<ul>
<li>
<a href="#">CATEGORIAS</a>
<ul>
<li>
<a href="#">PESSOAL</a>
<ul>
<li><a href="#">Pessoal 1</a></li>
<li><a href="#">Pessoal 2</a></li>
<li><a href="#">Pessoal 3</a></li>
</ul>
</li>
<li>
<a href="#">EMPRESARIAL</a>
<ul>
<li><a href="#">Empresarial 1</a></li>
<li><a href="#">Empresarial 2</a></li>
<li><a href="#">Empresarial 3</a></li>
</ul>
</li>
<li>
<a href="#">GOVERNAMENTAL</a>
<ul>
<li><a href="#">Gov 1</a></li>
<li><a href="#">Gov 2</a></li>
<li><a href="#">Gov 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CONTATO</a></li>
</ul>
</nav>