How to use Flexbox with nested list items

Question

Hi,

So i'm trying to create a navbar with a CSS dropdown menu. My nav consists of an icon, a search bar, and then an ul with one list item, and then another ul within this one list item.

As you would expect, these are currently all sat under one another.

I've been working on this for a good few hours and just can't figure it out.

I know Flex containers only work with direct children.

So how do I get this to all display on one line (nicely) with all my nested elements.

Here is my HTML:

        <span class="fab fa-asymmetrik"></span>

        <div>
            <input class ="search-input" type="text" placeholder="">
            <span class="fas fa-search"></span>
        </div>

        <nav class="container__nav"> 
            <ul>
                <li class="nav__item-dropdown"><a href="#">User</a>

                    <ul>
                        <li class="dropdown__item"><a href="#">Account</a></li>
                        <li class="dropdown__item"><a href="#">Settings</a></li>
                        <li class="dropdown__item"><a href="#">Log Out</a></li>
                    </ul>
                </li>
            </ul>

        </nav>

    </header>

Answer 1 · 2018-06-08T17:06:12Z

June 8, 2018 5:06pm

To get all the nested elements to display on one line you can use nested flex containers:

header,
.nav__item-dropdown,
.nav__item-dropdown ul
{
  display: flex;
  align-items: center;
}
header *, .dropdown__item { flex: 1; }
header :last-child { flex: 4; }

Welcome to the Treehouse Community

Looking to learn something new?

GoldSpec Digital

GoldSpec Digital

How to use Flexbox with nested list items

1 Answer

Steven Parker

Steven Parker