Yukihira Soma Yukihira Soma - 6 months ago 9
HTML Question

Dropdown border bottom disaappeard when hover to submenu

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?

here is the picture when i hover to the dropdown menu.
enter image description here

here is the picture when i hover to sub menu the border bottom at the dropdown menu dissappears.
enter image description here

here is my html code.

<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="style.css" rel ="stylesheet">
<link rel="shortcut icon" type="img/png" href="img/asd.png"/>
</head>
<body>
<div class ="top-bar-dark">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-7">
<div class="top-bar-socials">
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/official_gapc">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="col-sm-8 col-xs-5 text-right">
<ul class="list-inline top-dark-right">
<li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
<li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
<li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="img-responsive"src="images/brandz.png">

</div>

<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About us</a>
<ul class="dropdown-menu">
<li><a href="#">History</a></li>
<li><a href="#">Mission and Vision</a></li>
</ul>
<li><a href="#">Admissions</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Faculty Portal</a></li>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<img class ="modal-logo center-block" src="images/asd.png" >
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
<input type="username" class="form-control" placeholder="Student No.">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>

<div class="form-group">
<button type="button" class="btn btn-danger btn-sm btn-block">Log in</button>
</div>
</form>
</div>

</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


here is my css.

.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 > li > 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 > li > a:hover, .nav.navbar-nav > li.active a{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #a92419;
background-color: white;
}
.navbar-default{
background-color:#fff;
margin: 0;

}
.nav>li>a {
position: relative;
}
.navbar-default .navbar-right > li > 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 > li{
display: :inline-block;
}
.nav.navbar-nav{
list-style-type:none;
}
.nav.navbar-nav > li > 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>li>a:hover {
color:#a92419;
border-bottom-color: #a92419;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 3em;
color: #333;
white-space: nowrap;
}

Answer

Add below code to your CSS. Check below snippet.

.dropdown:hover a.dropdown-toggle {
  border-bottom-color: #a92419;
}

.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 > li > 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 > li > a:hover,
.nav.navbar-nav > li.active a {
  color: #a92419;
  border-bottom-color: #a92419;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: #a92419;
  background-color: white;
}
.navbar-default {
  background-color: #fff;
  margin: 0;
}
.nav>li>a {
  position: relative;
}
.navbar-default .navbar-right > li > 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 > li {
  display: : inline-block;
}
.nav.navbar-nav {
  list-style-type: none;
}
.nav.navbar-nav > li > 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>li>a:hover {
  color: #a92419;
  border-bottom-color: #a92419;
}
.dropdown-menu>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 3em;
  color: #333;
  white-space: nowrap;
}
.dropdown:hover a.dropdown-toggle {
  border-bottom-color: #a92419;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!DOCTYPE html>
<html>

<head>
  <title>Student Portal</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  <link href="style.css" rel="stylesheet">
  <link rel="shortcut icon" type="img/png" href="img/asd.png" />
</head>

<body>
  <div class="top-bar-dark">
    <div class="container">
      <div class="row">
        <div class="col-sm-4 col-xs-7">
          <div class="top-bar-socials">
            <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
              <i class="fa fa-facebook"></i>
            </a>
            <a href="https://twitter.com/official_gapc">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
              <i class="fa fa-linkedin"></i>
            </a>
          </div>
        </div>
        <div class="col-sm-8 col-xs-5 text-right">
          <ul class="list-inline top-dark-right">
            <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
            <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
            <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-default navbar-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <img class="img-responsive" src="images/brandz.png">

      </div>

      <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About us</a>
            <ul class="dropdown-menu">
              <li><a href="#">History</a>
              </li>
              <li><a href="#">Mission and Vision</a>
              </li>
            </ul>
            <li><a href="#">Admissions</a>
            </li>
            <li><a href="#">Contact us</a>
            </li>
            <li><a href="#">Faculty Portal</a>
            </li>
            <!-- Modal -->
            <div id="myModal" class="modal fade" role="dialog">
              <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <img class="modal-logo center-block" src="images/asd.png">
                  </div>
                  <div class="modal-body">
                    <form role="form">
                      <div class="form-group">
                        <div class="input-group">
                          <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
                          </div>
                          <input type="username" class="form-control" placeholder="Student No.">
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="input-group">
                          <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i>
                          </div>
                          <input type="password" class="form-control" placeholder="Password">
                        </div>
                      </div>

                      <div class="form-group">
                        <button type="button" class="btn btn-danger btn-sm btn-block">Log in</button>
                      </div>
                    </form>
                  </div>

                </div>
              </div>
            </div>
        </ul>
      </div>
    </div>
  </nav>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>

</html>