title: Dropdown border bottom disaappeard when hover to submenu
body: <p>when i hover to submenu of my dropdown the style border bottom is disappearing i want the border bottom color to stay at the dropmenu when i will hover to the sub menu. what element will i override? can someone give me clues on how to do it?</p>
  
  <p>here is the picture when i hover to the dropdown menu.</p>
  
  <p><a href="https://i.stack.imgur.com/p39zD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p39zD.png" alt="enter image description here"></a></p>
  
  <p>here is the picture when i hover to sub menu the border bottom at the dropdown menu dissappears.</p>
  
  <p><a href="https://i.stack.imgur.com/GVci0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GVci0.png" alt="enter image description here"></a></p>
  
  <p>here is my html code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Student Portal&lt;/title&gt;
      &lt;link rel="stylesheet" href ="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"&gt;
      &lt;link href="style.css" rel ="stylesheet"&gt;
      &lt;link rel="shortcut icon" type="img/png" href="img/asd.png"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class ="top-bar-dark"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                    &lt;div class="col-sm-4 col-xs-7"&gt;
                          &lt;div class="top-bar-socials"&gt;
                              &lt;a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts"&gt;
                                  &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
                              &lt;/a&gt;
                              &lt;a href="https://twitter.com/official_gapc"&gt;
                                  &lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
                              &lt;/a&gt;
                              &lt;a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city"&gt;
                                  &lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-8 col-xs-5 text-right"&gt;
                          &lt;ul class="list-inline top-dark-right"&gt;                      
                              &lt;li class="hidden-sm hidden-xs"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt; gapc_school@yahoo.com.ph&lt;/li&gt;
                              &lt;li class="hidden-sm hidden-xs"&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt; (02) 282-9036&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#" class="login"&gt;&lt;i class="fa fa-lock"&gt;&lt;/i&gt; Login&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;nav class="navbar navbar-default navbar-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"&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;img class="img-responsive"src="images/brandz.png"&gt; 
  
          &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="nav-collapse"&gt; 
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;About us&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Mission and Vision&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Admissions&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;a href="#"&gt;Faculty Portal&lt;/a&gt;&lt;/li&gt;
                      &lt;!-- Modal --&gt;
                          &lt;div id="myModal" class="modal fade" role="dialog"&gt;
                              &lt;div class="modal-dialog"&gt;
                      &lt;!-- Modal content--&gt;
                               &lt;div class="modal-content"&gt;
                                   &lt;div class="modal-header"&gt;
                                      &lt;img class ="modal-logo center-block" src="images/asd.png" &gt;
                                   &lt;/div&gt;
                                   &lt;div class="modal-body"&gt;
                                      &lt;form role="form"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;div class="input-group"&gt;
                                                 &lt;div class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/div&gt;
                                                 &lt;input type="username" class="form-control" placeholder="Student No."&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                           &lt;div class="form-group"&gt;
                                               &lt;div class="input-group"&gt;
                                                  &lt;div class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-lock"&gt;&lt;/i&gt;&lt;/div&gt;
                                                  &lt;input type="password" class="form-control" placeholder="Password"&gt;
                                               &lt;/div&gt;
                                          &lt;/div&gt;
  
                                          &lt;div class="form-group"&gt;
                                            &lt;button type="button" class="btn btn-danger btn-sm btn-block"&gt;Log in&lt;/button&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;  
                                   &lt;/div&gt;
  
                               &lt;/div&gt;
                              &lt;/div&gt;
                         &lt;/div&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
      &lt;script src="js/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is my css.</p>
  
  <pre><code>.top-bar-dark {
    background-color: #a92419;
  }
  
  .top-bar-light {
    background-color: #f3f3f3;
  }
  .top-bar-light .top-dark-right li {
    border-color: #ddd;
  }
  
  .top-bar-light .top-dark-right li a:hover {
    color: #32c5d2;
  }
  .top-bar-socials {
    line-height: 30px;
    padding-top: 5px;
  }
  .top-bar-socials:after {
    display: table;
    clear: both;
    content: "";
  }
  .top-bar-socials a {
    margin: 0px 8px;
    text-decoration: none;
    font-size:18px;
    color: #fff;
  }
  
  .top-dark-right {
    margin: 0px;
    padding: 0px;
  }
  
  .top-dark-right li {
    line-height: 40px;
    border-left: 1px solid #932015;
    padding: 0px 10px;
  
  }
  
  .top-dark-right li, .top-dark-right li a {
    color: #d7d7d7;
    font-size: 12px;
  }
  
  .top-dark-right li i {
    margin-right: 5px;
  }
  
  .top-dark-right li a:hover {
    color: #fff;
  }
  a.login{
    text-decoration: none;
  }
  .fa-facebook:hover{
    color:#3b5998;
  }
  .fa-twitter:hover{
    color:#1dcaff;
  }
  .fa-linkedin:hover{
    color:#007bb5;
  }
  .navbar-default .navbar-nav &gt; li &gt; a {
   font-weight: 590;
   color: #949494;
   display: block;
   padding: 5px 35px 2px 45px;
   border-bottom: 3px solid transparent;
   line-height: 80px;
   text-decoration: none;
   transition: border-bottom-color 0.5s ease-in-out;
   -webkit-transition: border-bottom-color 0.5s ease-in-out; 
   }
   .nav.navbar-nav &gt; li &gt; a:hover, .nav.navbar-nav &gt; li.active a{
      color:#a92419;
      border-bottom-color: #a92419;
    }
    .navbar-default .navbar-nav&gt;.active&gt;a, .navbar-default .navbar-nav&gt;.active&gt;a:focus, .navbar-default .navbar-nav&gt;.active&gt;a:hover {
      color: #a92419;
      background-color: white;
  }
   .navbar-default{
   background-color:#fff;
   margin: 0;
  
   }
   .nav&gt;li&gt;a {
   position: relative;
   }
  .navbar-default .navbar-right &gt; li &gt; a {
  padding: 0 30px;
  margin-right:6px;
   }
  .navbar-default .navbar-toggle .icon-bar {
   background-color: #000000;
   margin:0 0 4px;
   width: 25px;
   height: 5px;
  }
   .nav.navbar-nav &gt; li{
   display: :inline-block;
   }
   .nav.navbar-nav{
   list-style-type:none;
   }
   .nav.navbar-nav &gt; li &gt; a:hover{
      color:#a92419;
     border-bottom-color: #a92419;
    }
  
    .navbar-default .navbar-toggle .icon-bar {
    background-color:#a92419 ;
    margin:0 0 4px;
    width: 25px;
    height: 5px;
  
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
    background: none;
    }
    button.navbar-toggle{
    background:none;
    border:none;
    color:#000;
    margin: 0px;
  }
  .dropdown:hover .dropdown-menu {
     display: block;
  }
  
  .dropdown-menu&gt;li&gt;a:hover {
      color:#a92419;
      border-bottom-color: #a92419;
  }
  .dropdown-menu&gt;li&gt;a {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: 400;
      line-height: 3em;
      color: #333;
      white-space: nowrap;
  }
  </code></pre>