Decentralized Sub Menu - according to browser, I don’t know where I’m going wrong

Asked

Viewed 33 times

2

inserir a descrição da imagem aqui

/*Sub-Menu*/

.menu.superior .nivel-dois, .menu.superior .nivel-dois, .menu.superior .nivel-um li:hover .nivel-dois{ display: contents; position:absolute; }

.pagina-login .menu.superior, .pagina-busca .menu.superior, .pagina-carrinho .menu.superior{ display: relative; }

.menu li.com-filho{
	position:inherit;
}
.menu.superior .nivel-dois{
display:none;
    position:absolute;
    top:103px;
    text-align:center;
    left:auto;
    margin-left:-35px;
    min-width:auto;
    width:140px;
    /*background:#fff;*/

}
.menu.superior .nivel-dois a{
font-weight:bold;
    color:#564119;
    margin-top:3px;
    background:#fff;
    width:157px;
    margin-left:-35px;
    
      -webkit-box-shadow: 0px 0px 5px;
      -moz-box-shadow: 0px 0px 5px ;
       -ms-box-shadow: 0px 0px 5px ;
        -o-box-shadow: 0px 0px 5px ;
           box-shadow: 0px 0px 5px ;
}
.menu .nivel-dois, .menu .nivel-tres, .menu.lateral .nivel-um>li>a{
background:transparent;
}
.todas-menu-1{
background:transparent;
margin-left:-15px !important;
}

/*Fim do SubMenu */

  • Using position, px, float, etc... It’s boring and almost never going to get good. I advise you to use Flexbox

  • I’ll try to use it now, to see

  • Just remember that Flex only works from IE10 forward and still presents several types of https://caniuse.com/#feat=flexbox

  • Nothing...I’m not getting through

1 answer

0


Friend your mistake is this margin unnecessary!

See in the image that removing it all aligns!

Then in class .menu.superior .nivel-dois withdraw the margin-left: -35px

inserir a descrição da imagem aqui

  • valeuuuuuuuu , almost kill me here, thanks , something simple, I passed

  • That’s right kid, sometimes Browser understand CSS differently, so it’s good to test. Good luck!

  • thank you, thank you very much.

Browser other questions tagged

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