1

In my navigation links when I hover over a particular <li> the background color changes. That's what I want. But when I shift the mouse cursor to its child menu list (drop down content), the background color of the parent <li> changes to something else. I tried giving !important on its focus, before, after, active everything but nothing seems to work. When I hover on that particular <li> to get the sub menu the background color changes fine but when I move over to the sub menu its background color changes again. Also, please note that when I shift my cursor to the next <li> item its still working fine. The problem is occurring only when my cursor goes down to the dropdown menu. I am using Bootstrap v3.3.6.

CSS

#category-navi .cats-menu {
  width: 100%;
  background: rgba(0,0,0,0.6);
  position: fixed;
  margin-top: 60px;
  z-index: 100;
  border-top: 1px solid rgba(0,0,0,0.5);
}
.parent-menu .navbar-collapse {
  padding-left: 0px;
}
.parent-menu .nav li > a:hover  {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}
.parent-menu .nav li > a:after  {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}
.mega-dropdown {
  position: static !important;
}
.dropdown-toggle a:hover {
  background-color: rgba(0,0,0,0.8) !important;
  color: #fff;
}
.mega-dropdown-menu {
  padding: 20px 0px;
  width: 100%;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: underline;
  background-color: none !important;
}
.mega-dropdown-menu .dropdown-header {
  font-size: 18px;
  color: #ff3546;
  padding: 5px 60px 5px 5px;
  line-height: 30px;
}
.dropdown-toggle {
  color: #fff;
}
.mega-dropdown ul {
  margin-top: -1px !important;
  margin-left: -1px !important;
  border-top: none !important;
}

HTML

<section id="category-navi">
    <div class="cats-menu" id="cats-menu">
      <div class="container">
        <div class="parent-menu">
          <nav class="navbar">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse js-navbar-collapse">
                <ul class="nav navbar-nav">
              {foreach from=$cats item=cat}
                    <li class="dropdown mega-dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$cat.name} <span class="caret"></span></a>
                        <ul class="dropdown-menu mega-dropdown-menu">
                    {foreach from=$cat.categories item=subcat}
                            <li class="col-sm-3">
                                <ul>
                                    <li class="dropdown-header">{$subcat.sc_name}</li>
                        {foreach from=$subcat.ccname item=childcat}
                          <li><a href="#">{$childcat.cc_name}</a></li>
                        {/foreach}
                                </ul>
                            </li>
                    {/foreach}
                    </ul>
                    </li>
              {/foreach}
               </ul>
             </div><!-- /.nav-collapse -->
          </nav>
        </div>
      </div>
    </div>
  </section>
Shubham Jha
  • 63
  • 8
  • 2
    Why is this tagged with "bootstrap-4" when you are using Bootstrap v3.3.6.? – brombeer Jul 19 '18 at 08:25
  • people using bootstrap-4 have also must used bootstrap 3+. So they can help. :) And bootstrap 4 has some updates from bootstrap 3 but still 90% of the codes are identical. There is nothing wrong in seeking help buddy. After all getting the problem solved is what matters. If you can answer please help me rather than discussing what tags are used. :) – Shubham Jha Jul 19 '18 at 08:29
  • 1
    Would you mind removing the php tag please ? – Zyigh Jul 19 '18 at 08:31
  • @Zyigh done.. can you help me now? – Shubham Jha Jul 19 '18 at 08:32
  • @ShubhamJha this can help https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element – Zyigh Jul 19 '18 at 08:35

1 Answers1

0

change: .parent-menu .nav li > a:hover

to: .parent-menu .nav li > .dropdown-toggle:hover

mansoureh.hedayat
  • 596
  • 5
  • 17