I'm working on solving a CSS display issue and I'm stumped on how to solve this besides simply expanding the width of the parent div.
Here's the layout:
<div>
<ul>
<li>
<a href="javascript:void(0)">Test</a>
</li>
<li>
<a href="javascript:void(0)">Test Longer 23 Item</a>
</li>
<li>
<a href="javascript:void(0)">Test 2</a>
</li>
</ul>
</div>
And the relevant CSS:
a {
text-decoration: none;
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
}
a:hover {
font-weight: bold;
text-decoration: underline;
}
li + li {
border-width: 0;
}
li {
height: 28px;
line-height: 28px;
padding: 0 5px;
width: 100%;
}
ul {
padding: 14px 0;
list-style: outside none none;
}
div {
position: absolute;
right: 0;
top: 72px;
width: 150px;
}
This all works fine, except when hovering over the second link (Test Longer 23 Item), which results in the bolded, underlined text wrapping to a second line which overlaps with the anchor tag below it. I could easily fix this by expanding the width of the div so that it doesn't wrap, but I'm hoping there's a more dynamic solution available to "push" the subsequent li elements down when hovering.
Is this possible in pure CSS?
You can fix it by adding display: inline-block; to li.
Working Code Snippet:
a {
text-decoration: none;
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
}
a:hover {
font-weight: bold;
text-decoration: underline;
}
li + li {
border-width: 0;
}
li {
display: inline-block; /* <-- this! */
height: 28px;
line-height: 28px;
padding: 0 5px;
width: 100%;
}
ul {
padding: 14px 0;
list-style: outside none none;
}
div {
position: absolute;
right: 0;
top: 72px;
width: 150px;
}<div>
<ul>
<li>
<a href="javascript:void(0)">Test</a>
</li>
<li>
<a href="javascript:void(0)">Test Longer 23 Item</a>
</li>
<li>
<a href="javascript:void(0)">Test 2</a>
</li>
</ul>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments