Problems alignment dropdown menu

0

I have a dropdown menu in WordPress on the Services tab, but when I resize the page zoomed, the menu is not following its parent element,

Follow the 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>
    
asked by anonymous 16.03.2018 / 13:57

1 answer

0

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

    
19.03.2018 / 12:24