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>