Media Queries for Menu

1

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>

As you can see, the behavior structure that should be displayed when the screen width is less than 700px is basically ready. The bid is that I can not hide the "Categories" link and still display its Personal, Business and Government subitems on the left side of the Contact item, which is what I display in the first two images.

Can you help me? Thanks!

    
asked by anonymous 18.09.2016 / 02:05

0 answers