#15DaysOfCSS Day 5: Multi-level vertical navbars

For more than one level of navigation

On occasion, you will wind up with multiple levels of navigation in your vertical navigation bar. There are several ways to handle this with styling, but before we go there... what's the right way to mark this up?

✅ Reminder: Nested list markup

One of the top mistakes we see with students - and with many other developers - is improperly nesting lists.

Your list should be inside of the list item, not inside of the list itself:

<nav>
  <ul class="example1">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a>
      <ul>
        <li><a href="#">Link 2.1</a></li>
        <li><a href="#">Link 2.2</a></li>
      </ul>
    </li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

Notice that the li associated with Link 2 doesn't close until AFTER the nested list. MDN has all of the details.

Styling the list

Let's apply some standard styling for all of the examples in today's CodePen:

/* set the panel to have a width. This width could be set elsewhere, depending on desired effects */

nav {
  width: 25%;
}

/* turn off bullets, margin, padding */

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* big clickable areas, padding, colors, turn off underline */

a {
  display: block;
  padding: 0.5rem;
  background-color: #3867d6;
  color: #d1d8e0;
  text-decoration: none;
}

/* change the look on hover */

a:hover {
  background-color: #f7b731;
  color: #3867d6;
}

Apply this to your HTML and you get Example 1:

😳 Oh no, all of the list items look alike! 🤯

Why is this? Because we've written some very generic selectors in our CSS. For example, we have one declaration block that applies to all <ul> elements in the document.

We could fix this by applying a class to our second level styles, or once again, we could write some descendent selectors to address this.

ul ul a {
  padding-left: 2.5rem;
  font-size: 75%;
}

And the outcome would look like this:

Well THAT declaration is loaded, isn't it! What sorcery is this? 🦄 Let's address those concepts one by one.

Descendent selectors

You are a descendent of your parents, but you're also a descendent of your grandparents and great-grandparents. Likewise, a descendent selector simply says that somewhere in the ancestry of a given HTML element, a given pattern appears. It does not specifically call out a parent/child relationship. It merely suggests that the pattern appears somewhere in the family tree.

Descendent selectors are written with a space in between each element, class, or ID.

Write selectors 👉🏿 left to right; read them from right to left.👈🏼

Here we select <a> elements that are descended from a <ul> that's also descended from a <ul>. Check the HTML pattern above -- that's the 2nd level of this list. However, if we had a 3rd level or a 27th level of this list, it would also fit this pattern. At some point, a class may make more sense for the selector portion of this declaration.

Why padding and not margin to create the indent?

Padding has a background color associated with it. Margin does not.

If you use margin for the indent, you'll wind up with an interesting bite taken out of your menu.

(There's nothing technically wrong with that, of course! If you want that effect, go for it.)

The “bite” is caused by the background color placed on our a style. If you moved the blue background color to li, ul, or nav, you would not see it. However, when you hover over these sub-links, the yellow highlight would show the “bite.”

These “bugs” may be features for design, depending on what effect you desire.

A font size of 75%? What?

Yeah, isn't that cool? 😎

The base font size was set to 2rem, on line 41 in our CSS. If the font size is set to 75%, it will take 75% of the current font size as the size of the text.

In this case, the font size was set on body. That font size was inherited through nav, ul, li, ul, li, and a. There was no other font size declaration between body and these links, so the math here is 75% of 2rem, or 1.5rem. What does that mean in pixels? 1rem = 16px in most cases, so our base font size is about 32px. 75% of that is 24px.

If that's too much math, we love the pxtoem.com website that will do some conversions for you.

🥳 Reminder: it’s the weekend! 🥳

Our next post will be on Monday. We’ll keep checking for your posted answers to challenges for Days 1-5 on the various Substack discussion boards. Thank you so much to all who have been participating! It’s inspiring to watch you learn and grow from working on the challenges.

Next week we’ll dive into units, horizontal navbars with Flexbox, buttons vs links, buttons in navbars, and placing your logo in the middle of a navbar (and other locations!).

🎉📚Get the #15DaysOfCSS e-book📚🎉

These #15DaysOfCSS posts will be compiled into an e-book — pre-order now!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book.

🖥 Today’s CodePen examples

Today’s CodePen examples map out the code described in this email.

👩🏽‍💻 Challenge: Styling squid navigation! 🐙 🦑

👩🏽‍💻  Style these links from biology class, dealing with all of your favorite mollusks. You do have a favorite mollusk? 🐙 🦑

📚 More information and examples

The below are LinkedIn Learning courses with Jen. Subscription is required to access to view these. You may have access through your university or through your local public library.

📽 HTML and CSS: Creating Navigation Bars

📽 CSS: Selectors