title: How to make a CSS border for a dropdown menu?
body: <p>How do you make a CSS border for a dropdown menu and nav bar, like this:
  <a href="http://www.imagebam.com/image/15dde2419557895" rel="nofollow">http://www.imagebam.com/image/15dde2419557895</a></p>
  
  <p>I just learned about CSS, and I've been searching how to do this, but can't find how to make a bottom border for a dropdown menu.</p>
  
  <p>My code is</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  
  }
  
  .navbar {
      border-radius: 0px;
      border-width: 0px;
      margin-top: 20%;
      font-family: "Orator Std";
      font-size: 18px;
      color: #ffffff;
      background-color: #000000;
  }
  .dropdown-submenu {
      position: relative;
  }
  .dropdown-submenu &gt; .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -6px;
      margin-left: -1px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px 6px 6px 6px;
      border-radius: 0px;
  
  }
  .dropdown-submenu:hover &gt; .dropdown-menu {
      display: block;
  }
  .dropdown-submenu &gt; a:after {
      display: block;
      content:" ";
      float: right;
      width: 0px;
      height: 0px;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0px 5px 5px;
      border-left-color: #cccccc;
      margin-top: 5px;
      margin-right: -5px;
  }
  .dropdown-submenu:hover &gt; a:after {
      border-left-color: #ffffff;
  }
  .dropdown-submenu.pull-left {
      float: none;
  }
  .dropdown-submenu.pull-left &gt; .dropdown-menu {
      left: -100%;
      margin-left: 10px;
      -webkit-border-radius: 6px 0px 6px 6px;
      -moz-border-radius: 6px 0px 6px 6px;
      border-radius: 6px 0px 6px 6px;
  }
  @media screen and (max-width: 768px) {
      .navbar .navbar-collapse a {
          text-align: left;
          padding-left: 43%;
      }
      .dropdown-submenu a {
          padding-left: 44%;
      }
      .navbar .navbar-collapse .dropdown .dropdown-menu a {
          padding-left: 45%;
      }
  }
  
  
  #the-slider img{
  
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body background=""&gt;
  
  &lt;nav role="navigation" class="navbar navbar-inverse"&gt; &lt;!-- start navigation button --&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
          &lt;/button&gt; &lt;a href="#" class="navbar-brand"&gt;project&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;!-- Collection of nav links, forms, and other content for toggling --&gt;
  
      &lt;div id="navbarCollapse" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav navbar-center"&gt;
              &lt;li class="#"&gt;&lt;a href="#"&gt;&lt;B&gt;&lt;I&gt;Home&lt;/B&gt;&lt;/I&gt;&lt;/a&gt;
  
              &lt;/li&gt;
              
              &lt;li class="dropdown"&gt; &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;&lt;B&gt;&lt;I&gt;Collection &lt;/B&gt;&lt;/I&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  
                  &lt;ul role="menu" class="dropdown-menu"&gt;
  
  
  
  
  
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope-o fa-fw"&gt;&lt;/i&gt;&lt;B&gt;&lt;I&gt;All Collection Portfolio&lt;/B&gt;&lt;/I&gt;&lt;/a&gt;
  
                      
  
                      &lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-trash-o fa-fw"&gt;&lt;/i&gt;Collection 1&lt;/a&gt;
                      
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-pencil-square-o fa-fw"&gt;&lt;/i&gt;Collection 2&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-paper-plane-o  fa-fw"&gt;&lt;/i&gt;Collection 3&lt;/a&gt;
  
  
  
  
  
  
                      &lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-trash-o fa-fw"&gt;&lt;/i&gt;Cita Tenun Indonesia&lt;/a&gt;
  
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/li&gt;
              
              &lt;li class="dropdown"&gt; &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Things &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  
                  &lt;ul role="menu" class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope-o fa-fw"&gt;&lt;/i&gt; Inbox&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-pencil-square-o  fa-fw"&gt;&lt;/i&gt; Drafts&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-paper-plane-o  fa-fw"&gt;&lt;/i&gt; Sent Items&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-trash-o fa-fw"&gt;&lt;/i&gt; Trash&lt;/a&gt;
  
                          &lt;li class="dropdown-submenu"&gt; &lt;a tabindex="-1" href="#"&gt;&lt;i class="fa fa-hand-o-right fa-fw"&gt;&lt;/i&gt; Profile&lt;/a&gt;
  
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-calendar-o fa-fw"&gt;&lt;/i&gt; Account&lt;/a&gt;
  
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-folder-open-o  fa-fw"&gt;&lt;/i&gt; Users&lt;/a&gt;
  
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-file-o fa-fw"&gt;&lt;/i&gt; Login&lt;/a&gt;
  
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
  
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
              
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;
              &lt;/li&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt; &lt;!-- end navigation button--&gt;
  
  
  
  &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel" align="center"&gt; &lt;!-- start slider --&gt;
  &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
      &lt;div class="carousel-inner"&gt;     &lt;!-- picture slider start --&gt; 
          &lt;div class="item active"&gt; 
              &lt;img src="images/slide-1.jpg" alt="..."&gt;
              &lt;div class="carousel-caption"&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!--item 1--&gt;
          
  
          &lt;div class="item"&gt;
             &lt;img src="images/slide-2.jpg" alt="..."&gt;
             &lt;div class="carousel-caption"&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!--item 2--&gt;
  
          &lt;div class="item"&gt; &lt;!-- picture slider end--&gt;
             &lt;img src="images/slide-3.jpg" alt="..."&gt;
             &lt;div class="carousel-caption"&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!--item 3--&gt;
  
  &lt;/div&gt; &lt;!-- end picture slider--&gt;
      
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>