Struggling with creating an informal dropdown menu featuring images amid a block of text, the issue lies in setting the correct width for the parent container relative to the dropdown. Ideally, the width of the dropdown should be determined by the clickable item's width.
The green (#st) width appears fine without 'display: block;' on the #nd, but the #nd doesn't extend beyond the surrounding text.
After spending 2 days debugging using Firefox Developer Tools (formerly FireBug), I'm yet to find a viable solution. It has been about 5 years since I last worked extensively with CSS and used to handle such challenges effortlessly. ;-)
#container {
position: relative;
display: inline-block;
}
#st {
background-color: green;
display: block;
}
#nd {
background-color: red;
position: absolute;
white-space: nowrap;
}<ul>
<li>sadfasdf asdf sadfasdf asdfas dfasdfasd asdaff</li>
<li>tgestergsgfsdfg
<div id="container">
<span id="st">testing</span>
<ul id="nd">
<li>sadfasdf asdfsadf</li>
<li>rwert2345234 345345</li>
</ul>
</div>
</li>
<li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
<li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
<li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
</ul>