0
I have a menu dropdown in Wordpress in the tab of Services, only when I resize the page with zoom, the menu is not following its parent element,
Follows image and code.
ul.sub-menu {
display: none;
padding: 0px;
}
ul.sub-menu #menu-item-556, #menu-item-555, #menu-item-554, #menu-item-553, #menu-item-552 {
padding: 0px;
}
li#menu-item-721:hover ul.sub-menu{
display: block;
}
ul.sub-menu {
display: none;
position: absolute;
z-index: 999;
top: 90px;
right:7%;
width: 1170px;
height: 250px;
background-color: #23b9d7;
padding-top:40px;
border-radius: 5px;
margin: 0 auto;
}
li#menu-item-721:hover ul.sub-menu:after{
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #23b9d7;
top: -10px;
left: 64.5%;
}
li#menu-item-721:hover ul.sub-menu li {
display:inline-block;
float:left;
}
#menu-item-556 {
background-image: url('../hospitaldoiphone/img/iphone.png');
z-index: 999;
width: 67px;
height: 137px;
margin:0px 0px 0px 80px;
transition: all .2s ease-in-out;
}
#menu-item-555 {
background-image: url('../hospitaldoiphone/img/ipad.png');
z-index: 999;
width: 120px;
height: 136px;
margin:0px 0px 0px 80px;
transition: all .2s ease-in-out;
}
#menu-item-554 {
background-image: url('../hospitaldoiphone/img/macbook.png');
z-index: 999;
width: 242px;
height: 140px;
margin:0px 0px 0px 80px;
transition: all .2s ease-in-out;
}
#menu-item-553 {
background-image: url('../hospitaldoiphone/img/imac.png');
z-index: 999;
width: 140px;
height: 143px;
margin:0px 0px 0px 80px;
transition: all .2s ease-in-out;
}
#menu-item-552 {
background-image: url('../hospitaldoiphone/img/applewatch.png');
z-index: 999;
width: 120px;
height: 139px;
margin:0px 0px 0px 80px;
transition: all .2s ease-in-out;
}
#menu-item-556 a:hover, #menu-item-555 a:hover, #menu-item-554 a:hover, #menu-item-553 a:hover, #menu-item-552 a:hover, #menu-item-556:hover, #menu-item-555:hover, #menu-item-554:hover, #menu-item-553:hover, #menu-item-552:hover {
transform: scale(1.05)
}
#menu-item-556 a, #menu-item-555 a, #menu-item-554 a, #menu-item-553 a, #menu-item-552 a{
display: block;
color: #ffffff;
text-align: center;
transition: all .2s ease-in-out;
}
#menu-item-556 a {
width: 67px;
height: 160px;
display: block;
padding-top: 150px;
}
#menu-item-555 a {
width: 120px;
height: 160px;
padding-top: 150px;
}
#menu-item-554 a {
width: 242px;
height: 160px;
padding-top: 150px;
}
#menu-item-553 a {
width: 140px;
height: 160px;
padding-top: 150px;
}
#menu-item-552 a {
width: 120px;
height: 160px;
padding-top: 150px;
}<nav class="nav" role="navigation">
<ul><li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4 current_page_item menu-item-25"><a href="http://localhost/hospital-iphone/">HOME</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/hospital-iphone/empresa/">EMPRESA</a></li>
<li id="menu-item-721" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-721"><a href="/hospital-iphone/iphone/">SERVIÇOS</a>
<ul class="sub-menu">
<li id="menu-item-556" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-556"><a href="http://localhost/hospital-iphone/iphone/">IPHONE</a></li>
<li id="menu-item-555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-555"><a href="http://localhost/hospital-iphone/ipad/">IPAD</a></li>
<li id="menu-item-554" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-554"><a href="http://localhost/hospital-iphone/macbook/">MACBOOK</a></li>
<li id="menu-item-553" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-553"><a href="http://localhost/hospital-iphone/imac/">IMAC</a></li>
<li id="menu-item-552" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-552"><a href="http://localhost/hospital-iphone/apple-watch/">APPLE WATCH</a></li>
</ul>
</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/hospital-iphone/desbloqueio/">DESBLOQUEIO</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/hospital-iphone/blog/">BLOG</a></li>
<li id="menu-item-20" class="menu-last menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/hospital-iphone/contato/">CONTATO</a></li>
</ul> </nav>
Guy with what you posted not to simulate the error, you would not have any link to access the site?
– hugocsl
opa, sim sim, aqui está https://www.agenciagoup.com.br/projetos/hospital-iphone/
– Go uper
Man I took a look there and I’ll give you my opinion. You will only be able to solve this If you change all the measures that are in PX for %, because the ZOOM of the Browser scale the size of the elements, and as it has no relation of PX with % they even misalign... I wouldn’t worry about the Zoom that the user does in the Browser and sound with the Site Responsiveness as a whole! (even I managed to line up the hand with %, but is still bugging when Zoom with Browser)
– hugocsl
all measures of the page?
– Go uper
On the PX treatment for % can do only in your "menu/navbar", search on the subject of Browser Zoom before. Now about the Site being responsive I point out heavily until pq works on all screens is requirement of Google and important ranking factor in the search!
– hugocsl
I did a lot of research, but I couldn’t find anything that was relevant
– Go uper