I am trying to replicate the menu found on https://rxsafe.com/ over on our hubspot blog at https://info.rxsafe.com/blog . Is there anyway to do this by changing out some css? I have gotten it pretty close but the drop down has be set to a fixed width which looks terrible.
I am relatively new to using hubspot and was wondering if creating a custom menu is feesible and wondered if anyone has some examples I can look at.
Taking a look at your blog navigation, there are a few things that need to be done.
1. You need to remove position: relative; from the parent <li> of the child <ul>. Change it to position: static in your css. You don't want to position your child list to the parent <li>, you want to position the child list to the parent <ul>.
2. Give the parent <ul> position: relative;
3. Give the child list <ul> left: 0 !important; and right: 0;. Messing with your page css, from some reason the left attribute won't take effect on the element unless you use an !important tag. that isn't necessary for the right attribute.
4. This will get the child list <ul> to stretch like on the main site. after this you just need to space the child list's list items out evenly, which I am sure you won't have any trouble with.
@edobb - Good job on getting the menu this close, it's looking good.
I think what you should do is, on the child '<ul>' make this `display:flex;'
You might have to do some extra work to override the `display:block'` when the ul is shown on hover but, doing display flex should allow you to have even columns without forcing a width