I have a dropdown menu item, and I’d like the text to stay on one line and have the div get wider instead of the text taking up two lines.
Here’s the HTML
<li id="prod-cat">
<span>Shop For:</span>
<div id="prod-cat-select">
<span id="current-category">
<a href="" id="current-category-text">Masks</a>
<span class="arrow">v</span>
</span>
<ol id="prod-cat-dropdown">
<a class="inactive" href="/">
<li>Masks</li>
</a>
<a class="" href="/pages/top-hats">
<li>Top Hats</li>
</a>
</ol>
</div>
</li>
And CSS:
#prod-cat-select {
display: inline-block;
margin-left: 5px;
position: relative;
}
#current-category {
display: inline-block;
background-color: rgb(248,248,248);
padding: 8px 10px;
border: solid 1px #ddd;
cursor: pointer;
}
#prod-cat-dropdown {
position: absolute;
top: 37px;
z-index: 100;
font-weight: 700;
display: none;
background-color: rgb(248,248,248);
text-align: left;
border: solid 1px #ddd;
border-top: none;
margin: 0;
}
How can I fix this? Only way I can think of is to set a fixed width for the dropdown li item.