Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Bootstrap Build a Dropdown Menu

Posted by Ary de Oliveira
Ary de Oliveira
28,298 Points

CSS

Challenge Task 4 of 4

Finally, create a divider above the Plans & Pricing navigation link.

I can not see my mistake. need help

index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-muted" href="#">Ribbit</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a>
              <ul class="dropdown-menu">
              <ul>
       <li><a href="#">About Treehouse</a></li>
       <li><a href="#">Video Library</a></li>
       <li><a href="#">Learning Adventures</a></li>
       <li class="divider"></li>
       <li><a href="#">Plans &amp; Pricing</a></li>
       </ul>
    </ul>
            </li>
          </ul>
        </div>
      </div>
    </div><!-- End navbar -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

6 Answers

Ary de Oliveira
Ary de Oliveira
28,298 Points

in one way or another something is missing in this code !!!

Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points

I have used that code to complete the task - so it should also work for you.

Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points

The divider should be in a div not a li and you have added a ul to much.

<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-muted" href="#">Ribbit</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a>
              <ul class="dropdown-menu">
       <li><a href="#">About Treehouse</a></li>
       <li><a href="#">Video Library</a></li>
       <li><a href="#">Learning Adventures</a></li>
       <div class="divider"></div>
       <li><a href="#">Plans &amp; Pricing</a></li>
       </ul>
            </li>
          </ul>
        </div>
      </div>
    </div><!-- End navbar -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

NO NO WORK.... <div class="divider"></div> no work.... no understand...

Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points

Okay - lets look at your old code 

    <ul class="dropdown-menu">
   <!--  You added a ul here - this should not be here there is already a ul over this comment -->
              <ul>
       <li><a href="#">About Treehouse</a></li>
       <li><a href="#">Video Library</a></li>
       <li><a href="#">Learning Adventures</a></li>
   <!--  This should be a div not a li so change the li to div -->
       <li class="divider"></li>
       <li><a href="#">Plans &amp; Pricing</a></li>
   <!--  Now that we have deleted that ul we need to remove the end tag too -->
       </ul>
    </ul>

Correct:

     <ul class="dropdown-menu">
       <li><a href="#">About Treehouse</a></li>
       <li><a href="#">Video Library</a></li>
       <li><a href="#">Learning Adventures</a></li>
       <div class="divider"></div>
       <li><a href="#">Plans &amp; Pricing</a></li>
       </ul>
Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

the first 3 questions I answered without problem and I did, however 4 of 4, is giving work to find the correct answer ... I think I'll watch the video again ....

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Thank you for your help.. You tried to make the question? with your answer ...

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Course Framework Basics Prototyping with Bootstrap Building a Dropdown Menu 4 objectives Quest 4 of 4.

Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points
Mikkel Rasmussen
Mikkel Rasmussen
31,772 Points

The code I showed you at the top - will complete all the tasks.