如何使悬停而不是点击悬停引导菜单下拉菜单 [英] How to make twitter bootstrap menu dropdown on hover rather than click

查看:163
本文介绍了如何使悬停而不是点击悬停引导菜单下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我第一次使用bootstrap,真的很喜欢它 - 但我想做的一件事是让我的菜单自动下降悬停在上面,而不是必须点击菜单标题。我也想失去菜单标题旁边的小箭头。

I'm using bootstrap for the first time and really liking it - but one thing I'd like to do is have my menu automatically drop down on hover over, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.

推荐答案

我创建了一个纯on hover下拉菜单在最新的(v2.0.2)引导框架,支持多个子菜单,并认为我会发布它为未来的用户:

I created a pure on hover dropdown menu based on the latest (v2.0.2) bootstrap framework that has support for multiple submenus and thought i'd post it for future users:

CSS

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

演示

这篇关于如何使悬停而不是点击悬停引导菜单下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆