I am looking to create a CSS menu with specific constraints:
- The height and width of the parent
<div>are variable - The number of
<li>elements is unknown - The
<ul>must be at least as wide as the<div> - Each row of
<li>should contain as many items as possible, with a maximum width set for the<ul>
Desired outcome:
https://i.sstatic.net/L4e5a.jpg
The issue lies in the fact that the <ul> is not expanding as desired. When you run the code snippet, you will see this.
You have flexibility to modify the HTML, use flexbox and other techniques, but JavaScript solutions are not accepted. It is crucial to ensure IE10 compatibility.
div {
background: yellow;
display: inline-block;
padding: 20px 30px;
position: relative;
}
ul {
background: lightblue;
left: 0;
margin: 0;
max-width: 450px;
min-width: 100%;
padding: 0;
position: absolute;
top: 100%;
}
li {
background: orange;
display: inline-block;
margin: 2px;
padding: 20px 25px;
}<div>Stabat mater dolorosa
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>