Dropdown menu :: background

Hi there! In order to ensure the links appear full-width, you’ll need to adjust your CSS code a little.

Basically, you’ll want to make your li elements—.navbar-nav li either width: 100% or display: block. Because they’re set as inline-block here, they don’t extend to the full width of their containing element.

You will need to be a bit more specific with your selector, so that the CSS isn’t also applied to your main menu items. Try this:

.navbar-nav .dropdown-menu li {
    display: block;
}

Make sure to remove the !important flag from your .navbar-nav li declaration; this isn’t needed here. As a general rule, only use the !important flag if it’s your only option, since it can cause problems further down the line. Here’s the updated code for that section:

.navbar-nav li {
    float: none;
    display: inline-block;
    height: 32px;
}

That should do the trick! 🙂