menu bar does not display - html

Question

good morning, I have a problem with the menu bar, which when placing the logo makes the bar bigger, and I have a submenu, which does not display the options. I attach the code in case anyone can collaborate.
HOME
ABOUT
CONTACT
MENU
Ingresar
Buscar
Codigo QR
.imgBarra {
width: 30px;
height: 30px;
position: relative;
background: none;
align-items: flex-start;
padding: 0px;
margin: 0px;
margin-left: -20px;
margin-top: 20px;
}
.Barra li a{
text-decoration: none;
color: rgb(255, 255, 255);
padding: 20px;
display: block;
}
.Barra li{
display: inline-block;
text-align: center;
position: relative;
}
.Barra li a:hover{
background-color: aquamarine;
color: black;
}
.submenu{
position: absolute;
background: #e8e8e8;
width: 120%;
visibility: hidden;
}
.submenu li a{
display: block;
padding: 15px;
color: #fff;
font-family: Arial;
text-decoration: none;
}
.submenu li a:hover{
display: block;
transition: all .3s;

Answer 1

If your logo is .imgBarra, you don't need to add the property align-items: flex-start;
no display: flex; property has been set.
If you want to align it at the left of your header, you need to set the property to the container .barra.
Basically, if you set align-items: flex-start; to your logo container it will align all the children inside your logo container, not the logo itself.
To control the height and the alignment of the header properly you need to be careful with paddings and consider all the children inside.
Supposing that your HTML is like that:
<div class="barra>
<div class="imgBarra">Logo</div>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
To have an height of 110px total [30px(logo) + 40px(20px top + 20px bottom header padding) + 40px(20px top + 20px bottom links padding)], your CSS should look like this:
.barra {
position: relative;
padding: 20px;
display: flex;
align-items: center; /* to align vertically in the center all the children inside the header, so imgBarra and the li */
justify-content: space-between; /* or any other property to align horizontally the content inside the header */
}
.imgBarra {
width: 30px;
height: 30px;
}
.barra ul li a {
padding: 20px;
}
Regarding the submenu let's suppose your HTML looks like this, by hovering on "Home" the user should see your dropdown.
<div class="barra">
<div class="imgBarra">Logo</div>
<ul>
<li class="hasDropdown">
<a class="dropdownTrigger" href="#">Home</a>
<div class="dropdown">
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</div>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
To trigger and show the submenu you first need to hide the dropdown with visibility:hidden; then give this CSS rule which basically says "when hovering on "Home" (identified by the class dropdownTrigger) change the dropdown class to visiblity: visible;.
Your CSS should look like this:
.hasDropdown {
position: relative;
}
.dropdown {
visibility: hidden; /* Dropdown hidden by default */
position: absolute /* You will position it relatively to its parent hasDropdown */
top: 20px;
left: 0;
display: flex;
align-items: flex-start;
}
.dropdownTrigger:hover .dropdown {
visibility: visible;
}
As you can see in the dropdown container I have added the properties display: flex; and align-items: flex-start;, so all the children inside .dropdown will be aligned to the left, as said before. The property align-items will work only if display: flex; has been set.