Place sub-menu under the right li

Navigation
0

.menuAbrir, 
.menuFechar {
display:none;
}

.menuPrincipal li {
display:inline;
position: relative;
}

.menuPrincipal li a{
display:inline-block;
vertical-align:middle;
text-align:center;
width:115px;
line-height:70px;
font-size: 20px;
transition: background-color 1s;
}

.menuPrincipal li a:hover {
background-color: #63C4D3;
color: #FFFFFF;
}


.menuPrincipal li:hover > .sub-menu{
display:block;
}

.sub-menu {
display:none;
position:absolute;    
}

.sub-menu li {
display:block;
}
<ul class="menuPrincipal">
  <li><a id="mnHome" href="index.php">HOME</a></li>
  <li><a id="mnPesquisa" href="#">LOJA</a>
    <ul class="sub-menu">
      <li>Teste</li>
    </ul>
  </li>
  <li><a id="mnContato" href="../contato.php">CONTATO</a></li>
  <li><a id="mnSobre" href="../sobre.php">SOBRE</a></li>
</ul>

The problem is that the submenu drops below the first li and not below its corresponding li .

What to do?

    
asked by anonymous 02.03.2017 / 21:37

3 answers

2

The sub-menu was not aligned with the store menu because a position: relative was missing in the .mnPesquisa class and a left: 0 (to align to the store menu) in the .sub-menu class. When you gave absolute position in the .sub-menu you did not set the .mnPesquisa as the parent relative to position: absolute of .sub-menu . 

.menuPrincipal li {
  display: inline;
  position: relative;
}

.menuPrincipal li a {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 115px;
  line-height: 70px;
  border: #000 1px solid;
  font-size: 20px;
}

.menuPrincipal li:hover > .sub-menu {
  display: block;
}
.mnPesquisa {
  position: relative;
}
.sub-menu {
  display: none;
  position: absolute;
  left: 0;
}

.sub-menu li {
  display: block;
}
<ul class="menuPrincipal">
  <li><a id="mnHome" href="index.php">HOME</a></li>
  <li><a id="mnPesquisa" href="#">LOJA</a>
    <ul class="sub-menu">
      <li>Teste</li>
      <li>Teste</li>
      <li>Teste</li>
      <li>Teste</li>
    </ul>
  </li>
  <li><a id="mnContato" href="../contato.php">CONTATO</a></li>
  <li><a id="mnSobre" href="../sobre.php">SOBRE</a></li>
</ul>
    
03.03.2017 / 02:42
1
  • The element <li> of the ".main" class must be "position: relative" to control the positioning of an element with "position: absolute" within it, preventing it from getting lost in the document;
  • "box-sizing: border-box" is essential in virtually every document (at least I use a lot, and it's even present in Bootstrap). 

* {
  box-sizing: border-box;
}
.menuPrincipal li {
  position: relative;
  display: inline-block;
}
.menuPrincipal li a {
  display: inline-block;
  text-align: center;
  width: 115px;
  line-height: 40px;
  border: #000 1px solid;
  font-size: 20px;
}
.menuPrincipal li .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  border: 1px solid #000;
  padding: 0;
}
.menuPrincipal li:hover .sub-menu {
  display: block;
  width: 100%;
}
.menuPrincipal li .sub-menu li {
  display: block;
}
<ul class="menuPrincipal">
  <li><a id="mnHome" href="index.php">HOME</a></li>
  <li><a id="mnPesquisa" href="#">LOJA</a>
    <ul class="sub-menu">
      <li>Teste1</li>
      <li>Teste2</li>
      <li>Teste3</li>
    </ul>
  </li>
  <li><a id="mnContato" href="../contato.php">CONTATO</a></li>
  <li><a id="mnSobre" href="../sobre.php">SOBRE</a>
    <ul class="sub-menu">
      <li>Teste1</li>
      <li>Teste2</li>
      <li>Teste3</li>
    </ul>
  </li>
</ul>
    
03.03.2017 / 02:42
0

Oops, is everything good?

I'm new to the area and discovered two ways to leave it under the property.

1) Tag Margin: .sub-menu li { margin-left: 120px; }

2) Float Tag: .sub-menu li { float: 120px; }

In my view, I would use the float tag.

I hope to have helped, hugs.

    
03.03.2017 / 01:55
How to use Lambda expression in ListListobject? Client Rest in Java receiving a LocalDate