In my project, I am dealing with a series of list items where some have child lists containing sub navigation links. To create a hover effect using CSS, I set display: none on the child <ul> and then change it to display: block when hovering over the parent element.
The issue I'm facing is that when hovering, the parent <li> expands in size, which is not the desired behavior. Is there a way to prevent this growth? I want the width of <li> items without child lists to remain constant even when hovered over.
<ul class="flex unstyled-list">
<li><a href="/">link</a></li>
<li><a href="/" target="_blank">link 2</a></li>
<li>
<a href="/">parent 1</a>
<ul class="unstyled-list">
<li><a href="/">Hgdfgdf</a></li>
<li><a href="/">Hgdfgdf</a></li>
</ul>
</li>
<li>
<a href="/">parent 2</a>
<ul class="unstyled-list">
<li><a href="/">Hgdfgdf gdf ggf dfs</a></li>
<li><a href="/">Hgdfgdf gdf gdf gfd</a></li>
</ul>
</li>
</ul>
.unstyled-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.flex {
width: 970px;
height: 37px;
display: flex;
flex: 1 0 auto;
flex-basis: 100%;
background-color: #000;
}
.flex li {
flex-grow: 1;
height: 37px;
line-height: 37px;
color: #fff;
text-align: center;
}
#nav-strip li:hover {
background-color: #000;
}
.flex li:hover ul {
display: block;
}
.flex li a {
display: block;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.flex li ul {
display: none;
width: 200px;
padding: 0;
}
.flex li ul li {
width: 185px;
height: 30px;
line-height: 30px;
padding: 0 0 0 15px;
background: #000;
text-align: left;
}
.flex li ul li:hover {
background: #1e1d3f;
}
.flex li ul li a {
display: block;
font-size: 12px;
font-weight: normal;
}
For a live example, visit: