As I work on creating a multi-level navbar using CSS and HTML, I am facing a challenge. I want to structure a drop-down ul-list with multiple columns side by side rather than in a single long column as is traditional. I have tried using the display: flex; property on the ul-list, but so far, I have not been successful.
CSS
ul {
list-style:none;
padding: 0;
margin: 0;
background: #333;
}
ul li {
display: block;
position: relative;
float: left;
background: #333;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
.main-navigation li ul li {
border-top: 0;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before, ul:after {
display: table;
content: "";
}
ul:after {
clear: both;
}
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
HTML
<ul class="main-navigation">
<li>
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Dropdown</a>
<ul>
<li><a href="#">column1</a></li>
<li><a href="#">column1</a></li>
<li><a href="#">column1</a></li>
<li><a href="#">column2</a></li>
<li><a href="#">column2</a></li>
<li><a href="#">column2</a></li>
<li><a href="#">column3</a></li>
<li><a href="#">column3</a></li>
<li><a href="#">column3</a></li>
</ul>
</li>
<li><a href="#">Second Link</a></li>
</ul>
</li>
</ul>