# Dropdown menu child length

**URL:** <https://community.hubspot.com/t/dropdown-menu-child-length/7590>\
**Category:** CMS Development\
**Created:** [January 31, 2018, 10:54pm UTC](https://community.hubspot.com/t/dropdown-menu-child-length/7590 "2018-01-31T22:54:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JackieCassin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jackiecassin/32/22307_2.png) [@JackieCassin](https://community.hubspot.com/u/JackieCassin)\
**Post date:** [January 31, 2018, 10:54pm UTC](https://community.hubspot.com/t/dropdown-menu-child-length/7590/1 "2018-01-31T22:54:48Z")

</div>

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?)

 ![Screen Shot 2018-01-31 at 4.52.25 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/c/cc408391f4073857d949747ad530c287d6050cfd.jpeg)

.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;  
}

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [February 2, 2018, 10:56pm UTC](https://community.hubspot.com/t/dropdown-menu-child-length/7590/2 "2018-02-02T22:56:43Z")

</div>

@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%;