Question

我在使用wordpress的bootstrap主题和普通旧网页的bootstrap主题之间的区别时遇到了一些麻烦。

wordpress上的主菜单（最顶层的菜单）显示效果很好，它的样式很漂亮，当你将鼠标放在它上面时一切都会掉下来......但是在主页面上它只是一个噩梦，只在点击时显示。 / p>

我已经比较了两个bootstraps的CSS和JS文件，但我找不到WP在悬停时显示的原因，并且允许我单击悬停链接而常规链接不是。文件之间的唯一区别是颜色。有人可以帮我解决这个问题吗？

Wordpress菜单：http://www.nextlevelsmf.com/news/

常规菜单（仅限此页）：http://www.nextlevelsmf.com/testing.html

Answer 1

CSS样式有一个类navbar-main的选择器，在非菜单页面的菜单中不存在。添加此CSS：

.navbar li.dropdown:hover > ul.dropdown-menu {
 display: block;
 -webkit-animation: fadeInUp 300ms;
   -moz-animation: fadeInUp 300ms;
   -ms-animation: fadeInUp 300ms;
   -o-animation: fadeInUp 300ms;
   animation: fadeInUp 300ms;
}

.navbar .dropdown-menu {
  background-color: #2d2d2d;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin-top: -3px;
}
.navbar .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #999;
}
.navbar .dropdown-menu > li:hover > a,
.navbar .dropdown-menu > li:focus > a,
.navbar .dropdown-menu > li.active > a {
  background-color: #2d2d2d;
}
.navbar .dropdown-menu > li:last-child > a {
  border-radius: 0 0 3px 3px;
}
.navbar .dropdown-menu > li.divider {
  background-color: #2d2d2d;
}
.navbar li.dropdown:hover > ul.dropdown-menu {
  display: block;
  -webkit-animation: fadeInUp 300ms;
  -moz-animation: fadeInUp 300ms;
  -ms-animation: fadeInUp 300ms;
  -o-animation: fadeInUp 300ms;
  animation: fadeInUp 300ms;
}
.navbar .sub-menu .dropdown-menu {
  left: 100%;
  top: 0;
  margin-top: 0;
}

基于navbar-right的媒体查询也正确对齐下拉列表。添加此内容以修复：

@media (min-width: 768px)
.navbar-right .dropdown-menu {
  right:0;
  left: 0;
}

这个引导菜单如何显示悬停下拉？

1 个答案: