Dropdown menu child length

[JackieCassin]

I'm struggling to get a custom dropdown menu to resize to acommadate the length of the child menu items. Below is the code section for the menu. (I have read other forum posts regarding this issue and have tried  "overflow: visible; / max-width: none;" but perhaps I added them to the wrong tag?)

.homepage_services_menu {
list-style:none;
}

.homepage_services_menu ul{
padding: 0px;
margin: 0px;
text-align: center;
}

.homepage_services_menu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1{
display: block;

background: #222b5e;
margin: 0px 16px 0px 0px;
padding: 10px 15px;
}

.homepage_services_menu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1:hover{
background-color:#e83b1f;
}

.homepage_services_section {
width: 100%;
background: #f2f2f2;
}

.homepage_services_menu .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
width: 100%;
margin: 12px 0px 0px 0px;
/*padding: 0px 15px;*/
font-weight: normal;
}

.homepage_services_menu .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper a {
padding: 10px 15px;
margin: 0px 0px 1px 0px;
background: #222b5e;
font-weight: normal;
/*border-bottom: 0.5px solid #bbbdbb;*/
}

.homepage_services_menu .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper a:hover {
background-color: #7f828f;
}

[Jsum · Accepted solution]

@JackieCassin,

Your child menus are positioned absolutely, relative to their parent <li>. Because if this they are limited to the width of the parent <li>.

to force the child menu to cross the bounds of it's parent you have to either give it a static width like 500px or a percentage that is over 100%, such as 150%;