Menu hover when submenu is active

Hello.
I have the menu using css that add a border-bottom when a menu item is selected. It works with the unique pages, but when I clic a submenu page, the border is not selected to the current-mother menu item.
My web is faib.es, and the CSS for menu is this.
Thanks

/* =Navigation
----------------------------------------------- */
.navbar.navbar-default {
  background-color: #2d353f;
  font-family: 'Open Sans', serif;
  height: 53px;
}

.navbar-default .navbar-nav > li > a {
  color: white;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: bolder;
  text-shadow: 1px 1px 5px black;
  margin-top: -6px;
  border-bottom: 4px solid transparent;
}

#logo {
margin-left: 85px;
margin-top: 10px;
display: inline;
position: absolute;
z-index: 0;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: white !important;
  background-color: none !important;
  border-bottom: 4px solid #1fd51f;
}

.navbar-default .navbar-nav > .active > .caret {
color: white !important;
}

.navbar-default .navbar-nav .dropdown-menu > li:hover,
.navbar-default .navbar-nav .dropdown-menu > li:focus {
  color: black !important;
  /*background-color: transparent;*/
  background-color: rgb(175, 175, 175) !important;
}

.dropdown-menu>li>.caret {
  color: white !important;
}

.dropdown-menu > .active {
  background-color: white !important;
  color: none !important;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover,
.dropdown-menu>.active>.caret {
  color: #636467 !important;
  background-color: none !important;
}

.dropdown-menu > .active > a:hover {
    color: white !important;
    background-color: none !important;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li:hover > a, .dropdown-menu > li:hover > .caret {
    background-color: transparent;
    color: white !important;
}

.dropdown-menu > li > a {
  color: #636467 !important;
}

.navbar-nav > li:hover > .caret {
  color: white !important;
}

.navbar-default .navbar-nav > li > a:hover{
  color: white;
  background-color: none !important;
}

.navbar-default li:hover a {
    background: none;
    color: white;
text-shadow: none;
}

.dropdown-menu {
margin-top: -15px !important;
  
}

@media (max-width: 1024px) {

body.archive .post-inner-content,
body.blog .post-inner-content,
.post-inner-content:first-child {
  border-top: 1px solid #dadada;
  margin-top: -30px;
}

.well {
    margin-top: 105px !important;
}
}

@media (max-width: 992px) {
#logo {
display: none;
}

.navbar.navbar-default {
display: none;
}

#dabar {
display: none;
}

body.archive .post-inner-content,
body.blog .post-inner-content,
.post-inner-content:first-child {
  margin-top: 30px;
}

.well {
    margin-top: 15px !important;
}
  
}

Hi @mdomfu,

I hope you are well today and thank you for your question.

You can make it work by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.navbar-default .navbar-nav > .current-menu-ancestor > a{
        border-bottom: 4px solid #1fd51f;
}

Best Regards,
Movin

Working perfectly, thanks for the fast reply!

You are most welcome here :slight_smile: