0

Note: Donot mark it as duplicate because I want only solution that uses no additional JS and/or css !!

I am using Bootstrap 3 and I know from here that the .dropdown-submenu has been removed in Bootstrap 3 RC

I checked this too ... I want similar menu like this but Without any additional JS !! Is there any want to get :hover effect in my menu without adding any JS like above link ?? I just want to use pure Bootstrap 3 classes.

I tried, but it is not working as expected !!

                   <ul id="menu" class="nav navbar-nav navbar-right margin-bottom-half-em">
                        <li class="aboutus dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">About Us <span class="caret"></span></a>
                            <ul class="dropdown-menu bg-dark-gray">
                              <li><a href="#" class="overview">Overview</a></li>
                              <li><a href="#" class="ourTeam">Our Team</a></li>
                              <li><a href="#" class="ourMission">Our Missions</a></li>
                            </ul>
                        </li>....
Community
  • 1
  • 1
Junaid
  • 2,572
  • 6
  • 41
  • 77

1 Answers1

1

JSFiddle: http://jsfiddle.net/NzvKC/763/

You can use the :hover on the <a> and <ul> Tag to show the dropdown:

a.dropdown-toggle:hover + ul.dropdown-menu,
ul.dropdown-menu:hover { display: block; }

But you have to remove the 2px margin of the .dropdown-menu to not lose the :hover state when moving the mouse from the <a> to the <ul>

.dropdown-menu { margin-top: 0; }
Matthias
  • 627
  • 3
  • 8
  • Thanks, but as I mentioned that I donot want to write additional CSS or JS ... Is there any pure Bootstrap 3 solution ?? – Junaid May 27 '15 at 09:06
  • Oh I thought you just don't want to add new classes. But I guess there is no bootstrap solution for something that's removed from bootstrap? So this 3 CSS lines are maybe one of the easiest ways to fix this. – Matthias May 27 '15 at 09:09