How to align menu using CSS (Only) [closed]

Question

How to align menu using CSS (Only) [closed]

Navigation

#1 by (1 votes)
#2 by (1 votes)

-1

Hello, I'm developing a website and after creating a dropdown menu, I had a small problem. It is not spaced, and the sub menu that appears is horizontal. I'm not interested in putting border and etc., however, I need help arranging the menu so it stays aligned and fills the page. Can anyone help? (I will still insert divs and rest of the 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>

html5 css css3 css-hover

asked by anonymous 17.12.2018 / 16:35

2 answers

How to insert an image via CSS? [closed] How to send variables from php to html page?

score 1 · Answer 1

Good afternoon, my friend.

I do not know if that's all you need, but to leave the sub-menu items listed vertically, add a clear: both to the li's menu items. Following your code, simply add the clear within the selector you are using.

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

I take the liberty to suggest that you add classes in some elements, for example in the sub-menu, so that you can access them in an easier way.

score 1 · Answer 2

By using the display: flex property in conjunction with the justify-content property, you get a better handle on the elements of the 'container', which in this case would be the ul tag. 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 sobre flex

Your example running flex