1

I have created a bootstrap menu by referring from Bootstrap 3 dropdown sub menu missing but slightly in a different way. It is working fine on hovering through menus and submenus. However, if I click on any Menu items which has a submenu and then hover to other Menu, then submenus of both menus remain opened( the previous submenu gets closed on click but not on hover on new menu). I tried to fix this issue by adding a click event on hovering on the menu which has submenus.It fixed my problem partially. It closes the submenu of previously clicked(not hovered) menu, but background color of the previous menu doesn't get changed to original color.I am adding working code here with my jquery fix commented. Just copy this code in any HTML file and run. 

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"  crossorigin="anonymous"></script>
</head>
<body>
<style typ="text/css">
.nav > li > a, .dropdown-menu > li > a, .nav .open > a
{
    height: auto;
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    padding-right: 10px; 
    text-decoration: none;
    color: #284e36;
    line-height: normal;
    background-color: transparent;
    border-bottom: 2px solid white;
}

.nav > li, .dropdown-menu > li, .nav .open
{
    color: #284e36;
    border: none;
    background-color: #F9F9F9;
}

.nav > li > a:active, .dropdown-menu > li > a:active, .nav .open > a:active, .nav > li > a:focus, .dropdown-menu > li > a:focus, .nav .open > a:focus
{
    background-color: #CCCCCC;
    color: #001e06;
    border: none;
    border-bottom: 2px solid white;
    margin-left:0;
}

.nav > li > a:hover, .dropdown-menu > li > a:hover, .nav .open > a:hover
{
    background-color: #CCCCCC;
    color: #001e06;
    border: none;
    border-bottom: 2px solid white;
    margin-left:0;
}

.navbar-inverse
{
    background-color: white;
    border-color: white;
}

.navbar
{
    border-radius: 0px;
}

.dropdown-menu
{
    padding: 0;
}

/*https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing*/
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
/* For desktop and ipad */
@media all and (min-width: 768px)
{

    .dropdown-menu
    {
        margin: 0;
        left: 100%;
        top: 0;
    }

    .nav > li > a, .dropdown-menu > li > a, .nav .open > a
    {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

@media all and (max-width: 767px)
{

    .dropdown-menu
    {
        left: 20%;
        top: 90%;
        width: 100%;
        border: 1px solid white;
    }
}

</style>
<div class="navbar navbar-inverse navbar-default" style="width:300px">
   <ul class="nav">
      <li><a  href="Home.aspx" >Home</a></li>
      <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false"  >Menu 1 <span class="caret"></span>  </a>
         <ul class="dropdown-menu" >
            <li><a href="SubMenu1.aspx">SubMenu 11</a></li>
            <li class="dropdown-submenu">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false"  >Sub Menu 12<span class="caret"></span>  </a>
               <ul class="dropdown-menu" >
                  <li><a href="SubMenu121.aspx">Sub Menu 121</a></li>
                  <li><a href="SubMenu122.aspx">Sub Menu 122</a></li>
               </ul>
            </li>
            <li class="dropdown-submenu">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false"  >Sub Menu 13<span class="caret"></span>  </a>
               <ul class="dropdown-menu" >
                  <li><a href="SubMenu131.aspx">Sub Menu 131</a></li>
                  <li><a href="SubMenu132.aspx">Sub Menu 132</a></li>
               </ul>
            </li>
            <li><a href="SubMenu14.aspx">Sub Menu 14</a></li>
            <li><a href="SubMenu15.aspx">Sub Menu 15 </a></li>
            <li><a href="SubMenu16.aspx">Sub Menu 16</a></li>
            <li><a href="SubMenu17.aspx">Sub Menu 17</a></li>
         </ul>
      </li>
      <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false"  >Menu 2<span class="caret"></span>  </a>
         <ul class="dropdown-menu" >
            <li><a href="SubMenu21.aspx">Sub Menu 21</a></li>
            <li><a href="SubMenu22.aspx">Sub Menu 21</a></li>
            <li><a href="SubMenu23.aspx">Sub Menu 23</a></li>
         </ul>
      </li>
      <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false"  >Menu 3<span class="caret"></span>  </a>
         <ul class="dropdown-menu" >
            <li><a href="SubMenu31.aspx">Sub Menu 31</a></li>
            <li><a href="SubMenu32.aspx">Sub Menu 32</a></li>
            <li><a href="SubMenu33.aspx">Sub Menu 33</a></li>
         </ul>
      </li>
      <li><a  href="Menu.aspx" >Menu 4</a></li>
      <li><a  href="Menu.aspx" >Menu 5</a></li>
   </ul>
</div>
<!-- 
<script type="text/javascript">
           $(document).ready(function () {
               $('.dropdown-submenu').hover(function () {
                   $(this).click();
               });
           });
</script>
-->
</body>
Nikul Maniya
  • 247
  • 2
  • 14
Rajesh Patel
  • 36
  • 8

2 Answers2

1

if I understood you correctly. then you need to check this. 

 $('li').hover(function() {
      $(this).click();
 });

DEMO https://jsfiddle.net/princesodhi/pegzte0h/

Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35
  • It got one more issue mate. The background-color of Menu having SubMenu remains dark if we moves to item which doesn't have any submenu. Could you help https://stackoverflow.com/users/1636377/prince-sodhi – Rajesh Patel Jul 24 '17 at 10:33
  • Unfortunately it is not working. You click on any menu with submenu and then hover over one without submenu, you will find background color remains unchanged. Can we remove some class on mouseleave of li or dropdown-menu or dropdown-submenu which keeps background color? Changing background-color on mouseleave doesn't work. – Rajesh Patel Jul 25 '17 at 06:54
  • I solved the issue by adding below jquery code. $(document).ready(function () { $('.dropdown-toggle').hover(function () { $(this).css('background-color', '#CCCCCC'); $(this).click(); }); }); $('.dropdown-submenu').mouseleave(function () { $(this).find('.dropdown-toggle').css('background-color', '#F9F9F9').attr('aria-expanded', false); $(this).removeClass('open'); }); – Rajesh Patel Jul 25 '17 at 10:58
0

I solved the issue by adding below jquery code. 

<script type="text/javascript">
    $(document).ready(function () {
        $('.dropdown-toggle').hover(function () {
            $(this).css('background-color', '#CCCCCC');
            $(this).click();
        });
    });

    $('.dropdown-submenu').mouseleave(function () {
        $(this).find('.dropdown-toggle').css('background-color', '#F9F9F9').attr('aria-expanded', false);
        $(this).removeClass('open');
    });     
</script>
Rajesh Patel
  • 36
  • 8