How to align menu using CSS (Only)

Asked

Viewed 467 times

-1

Hello, I am developing a website and, after being able to create a dropdown menu, I had a small problem. The same is not spaced, and the sub menu that appears is arranged horizontally. I have no interest in putting edge and etc, however, I need help to arrange the menu so that it is aligned and fill the page. Can someone help us? (I will still insert Divs and rest of page).

body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
 
ul{
	color:#008000;
	float:left;
	display:inline-block;
	font-size: 18px;
	
}

li{
	float:left;
}

li ul{
	position: absolute;
	display: none;

}

li:hover ul, li.over ul{
	display:block;
	
}

li ul li{
	display:block;
}
<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>Teste</title>
         <link rel="stylesheet" type="text/css"  href="estilo.css" /> 
</head>
<body>
	<div>
		<img src="TCM_logo.jpg" width="20%" height="20%">
		<a href=""<img src="images.png" width="2%" =height="2%" align="right"></a>
	</div>
		<br>
		
<nav id="menu">
  <ul>
        <li>
        	<a>Historia</a>
        </li>

        <li>
        	<a>Localização</a>
        </li>

            <li>
            	<a href="produtos.html">Produtos</a>
                <ul>
					<li>
						<a href="#">Dietas</a>
					</li>
					<li>
						<a href="#"></a>Fórmulas
					</li>
					<li>
						<a href="#"></a>Suplementos
					</li>
					<li><a href="#"></a>Equipos
					</li>
					<li>
						<a href="#"></a>Frascos
					</li>
					<li>
						<a href="#"></a>Fraldas
					<li/>
				</ul>
            </li>

        	<li>
        		<a>Trabalhe Conosco</a>
        	</li>
        	
        	<li>
        		<a href="contato.html">Contato</a>
        	</li>                
</ul>
</nav>
<br>

<div>
	<img src="telao.png" width = "1049" height="300">
</div>
<div>
	<a href="produtos.html">aadkjsadj</a>
</div>
</body>
</html>

css html5 css3 css-hover

  • Your question is a little confused. How do you want the Menu to fill the page? Do you have any image of the layout of how it looks and how it should look? Edit your answer explaining the details better

  • 1

    I’ll edit it. Thank you!

2 answers

1

Using the property display: flex together with the property justify-content you get a better handle on the elements of the 'container', which in case would be the tag ul. Just add the following code in your style.

ul {
  width: 100%; /* Faz ocupar o espaço inteiro da tag pai, que seria o nav */
  display: flex; /* Transforma em um container flexível */
  justify-content: space-between; /* Separa os elementos igualmente entre eles */
}

Tutotial online on flex

Your example working with flex

1

Good afternoon friend.

I don’t know if that’s all you need, but to get the sub-menu items listed vertically, add a clear: Both to the li’s menu elements. Following your code, just add the clear inside the selector you are using.

li ul li{
  display: block;
  clear: both;
}

I take the liberty of suggesting that you add classes to some elements, for example in the sub-menu, so that you can access them more easily.

Browser other questions tagged css html5 css3 css-hover

You are not signed in. Login or sign up in order to post.