Modifying Dropdown-Toggle for Hover

Question

I am attempting to modify the Moderna site template. If you look at the links in the header and click on Features you will see a dropdown menu.

What I am trying to do is change it so this menu appears on hover instead of on click but I cannot seem to get it working.

These are what I am changing in the...

HTML

<div class="navbar-collapse collapse ">
    <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li class="dropdown active">
            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Features <b class=" icon-angle-down"></b></a>
            <ul class="dropdown-menu">
                <li><a href="typography.html">Typography</a></li>
                <li><a href="components.html">Components</a></li>
                <li><a href="pricingbox.html">Pricing box</a></li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

CSS

header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
header .nav li a.dropdown-toggle:hover,
header .nav li a.dropdown-toggle:focus,
header .nav li.active ul.dropdown-menu li a:hover,
header .nav li.active ul.dropdown-menu li.active a{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

I have tried changing the class="dropdown-toggle" to

class="dropdown-toggle:hover"
class="hover"
class="dropdown-toggle hover"

and I have tried changing data-toggle="dropdown" to

data-toggle="dropdown hover"
data-toggle="hover"
data-toggle="dropdown-toggle:hover"

but to no avail. I am doing something wrong however, I am not knowledgeable (clearly) enough to figure it out.

Might be related to this issue http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click — jusopi, Jun 04 '15 at 19:25
Hmmmm. I was looking at my css and I have changed almost all of the ones that just say `dropdown-toggle` to `dropdown-toggle:hover` but changing it either breaks my code or does no change. Per one of the comments I have also just tried removing `class="dropdown-toggle" data-toggle="dropdown"` and that broke it also. — Joey, Jun 04 '15 at 20:44
Using :hover pseudoclass won't work. I'm trying to figure out how is this menu even displayed. — JoannaFalkowska, Jun 04 '15 at 23:55

score 0 · Answer 1 · answered Jun 04 '15 at 19:33

0

I believe that the behavior that you expect not to be managed via css but rather via javascript and then change the class name is not needed. In this case, the click event that is caught and handled to display the menu.

answered Jun 04 '15 at 19:33

ScaisEdge

131,976
10
91
107

Modifying Dropdown-Toggle for Hover

1 Answers1