I'm facing an issue with my mega-menu where long links overlap text in other columns when the window size is reduced. I tried adding specific rules to the ul class,
.sub-menu-lists {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Adding these rules to the li class .hover_drop_down and .hover_drop_down a didn't solve the problem.
Although the overlap is fixed, the link is now truncated instead of displaying an ellipsis. I need the links to continue trailing to the end of the column.
You can view the issue on my CodePen page under the software menu. Any suggestions on how to achieve this?