Put sub-menu under the right li

Asked

Viewed 351 times

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 comes out below the first li and not under your li correspondent.

What to do?

css css3

  • test here and the sub-menu appeared below the "Shop" normally.

  • It seems to me normal too and your js abrefecha() is missing from the code

  • Yes, I missed a line I forgot to put. Look now doing please!

3 answers

2


The sub-menu did not align to the store menu because one was missing position: relative in class .mnPesquisa and a left: 0(to align to store menu) in class .sub-menu. When you gave position Absolute no . sub-menu vc did not set the .mnPesquisa as a parent of 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>

  • So, only porition:relative in li pai and left: 0;in ul sub-menu already solved. No need to mention id mnPesquisa

1

  • The element <li> of the class ". menuPrincipal" must be "position: relative" to control the positioning of an element with "position: Absolute" inside 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 is 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>

0

Oops, all right?

I’m new in the area and discovered two ways to leave under the property.

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

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

In my view, I would use the float tag.

Hope I helped, hugs.

Browser other questions tagged css css3

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