I am working on a navigation bar with submenus.
I would like the submenu ul to be 139px wide (so when hovered over, the dropdown box will expand to 139px). However, setting this width also results in a gap between the parent links.
For illustration:
In the following illustration, the spacing between the links appears fine initially. Nonetheless, when hovering over the products link, a gap appears between products and blog.
It's acceptable for the submenu to overlap with the blog li. Currently, the goal is to eliminate the gap.
.main_menu>div ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}
.main_menu>div ul li {
display: inline-block;
vertical-align: middle;
line-height: 1em;
padding: 1.2em 0.9em;
font-weight: 500;
color: #333;
border-radius: 25%;
cursor: pointer;
}
/* showing dropdown on parent hover */
.item-has-children .menu-children-wrapper {
border: 1px solid red;
height: auto;
background-color: #fff;
flex-direction: column!important;
display: none;
}
.item-has-children:hover ul {
display: block;
width: 139px;
}<div class="main_menu">
<div class="menu_container">
<ul>
<li class="item-has-children"><a href="#">Products ▾</a>
<ul class="menu-children-wrapper">
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item"><a href="#">Link 3</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Blog</a></li>
</ul>
</div>
</div>