Html 修改悬停的下拉切换

我正在尝试修改网站模板。如果您查看标题中的链接并单击

功能

，您将看到一个下拉菜单

我想做的是更改它，使此菜单显示在

悬停

上，而不是在

单击

上，但我似乎无法让它工作

这些都是我正在改变的

HTML

我已尝试将

class=“dropdown toggle”

更改为

• class=“下拉切换：悬停”

• class=“hover”

• class=“下拉切换悬停”

我尝试将

data toggle=“dropdown”

更改为

• data toggle=“下拉悬停”

• data toggle=“hover”

• data toggle=“下拉切换：悬停”

---

但是没有用。我做错了什么，但是我没有足够的知识（清楚地）去理解它。

我相信，您期望的行为不是通过css而是通过javascript来管理，然后更改类名是不必要的。在这种情况下，捕获并处理以显示菜单的单击事件。

可能与此问题Hmmmm有关。我在看我的css，我几乎把所有只说

下拉切换

的css都改成了

下拉切换：悬停

，但改变它要么会破坏我的代码，要么不会改变。根据其中一条评论，我还尝试删除了

class=“dropdown toggle”data toggle=“dropdown”

，这也破坏了它。使用：hover pseudoclass将无法工作。我想知道这个菜单是怎么显示的。

<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>

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;
}