Problems alignment dropdown menu

Asked

Viewed 79 times

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.

exemplo 1 exemplo 2

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?

  • opa, sim sim, aqui está https://www.agenciagoup.com.br/projetos/hospital-iphone/

  • 1

    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)

  • all measures of the page?

  • 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!

  • I did a lot of research, but I couldn’t find anything that was relevant

Show 1 more comment

1 answer

0

I was able to solve people, it was only necessary to change the attribute right in css by the margin-left, the menu was fixed.

Browser other questions tagged

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