IE和FF中twitter引导菜单的闪烁和错误位置

Question

我在IE 9-10和Firefox中的Twitter引导菜单有问题。在演示链接中，当你将鼠标悬停在菜单项上时，它们会完全消失和/或闪烁。下拉菜单的位置也错误。

我在Chrome中没有看到任何问题，但IE 9-10有最明显的问题。Firefox有闪烁和下拉定位问题，但它似乎没有IE那么糟糕。

有人能给我一些建议吗？

演示：http://codepen.io/maxwbailey/pen/envjd

来自IE检查器的HTML：

<DIV class=navbar>
<DIV class=navbar-inner>
    <DIV class=container><A class=brand href="http://google.com">Test</A>
        <nav class=nav-main role=navigation>
            <UL class="nav l_tinynav1" id=primary_navigation>
            <LI class=menu-about><A href="http://google.com">About</A></LI>
            <LI class="active dropdown menu-pages"><A class=dropdown-toggle href="#" data-target="#">Pages<B class=caret></B></A>
                <UL class=dropdown-menu>
                    <LI class=menu-blog><A href="http://google.com">Link1</A></LI>
                    <LI class="active menu-home"><A href="http://google.com">Link2</A></LI>
                    <LI class=menu-page-comments><A href="http://google.com">Link3</A></LI>
                    <LI class=menu-page-markup-and-formatting><A href="http://google.com">Link4</A></LI>
                </UL>
            </LI>
            <LI class="dropdown menu-depth"><A class=dropdown-toggle href="#" data-target="#">Link5<B class=caret></B></A>
                <UL class=dropdown-menu>
                    <LI class="dropdown-submenu menu-level-01"><A href="#">Level 01</A> 
                        <UL class=dropdown-menu>
                            <LI class=menu-level-02><A href="#">Level 02</A></LI>
                        </UL>
                    </LI>
                </UL>
            </LI>
        </nav>
    </DIV>
</DIV>

CSS：

.navbar {
margin-bottom: 0;
}
.navbar-inner {
background-color: #FFF;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat: no-repeat;
filter: none;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-width: 0;        
}
/* Mobile nav desktop mode */
.tinynav { display: none }
@media (min-width: 980px) {
.navbar .brand {
    padding: 24px 20px 10px;
}
.navbar .nav>li {
    line-height: 40px;
}
.navbar .nav>li>a {
    text-shadow: none;
}
.navbar .nav .dropdown-toggle .caret {
    margin-top: 18px;
}
.nav-main>ul>li>a, .nav-main>ul>li>a:hover {
    border-top: 5px solid transparent;
}
.nav-main .active a, .nav-main>ul>li>a:hover, .nav-main ul li:hover>a, .dropdown.open a {
    border-top-color: #FFA500;
}
.navbar .nav li.dropdown.open>.dropdown-toggle, .navbar .nav li.dropdown.active>.dropdown-toggle, .navbar .nav li.dropdown.open.active>.dropdown-toggle, .navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus {
    background-color: inherit;
}
/*Make menu drop on hover*/
ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;    
}
.nav>li>a:hover {
    display: none;
}
/* Remove arrow from top nav dropdown */
.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before    {
    content: none;
}
.dropdown-menu {
    margin: 0;
    border-top: 0;
    border-radius: 0;
}
.dropdown-submenu > .dropdown-menu {
    border-radius: 0;
}
.dropdown-menu {
    padding: 0;
}
.dropdown-menu > li > a {
    padding:8px 12px;
}
.dropdown-submenu > .dropdown-menu {
    margin-top: 0;
}
}
@media (max-width: 980px) {
/* Mobile nav */
.nav-main {
    position: relative;
}
.tinynav { 
    display: block;
    margin-top: 5px;
    position: absolute;
    right: 0;
}
.navbar .nav {
    display: none;
}
/* End Mobile nav */
} /* END (max-width: 980px) */

JS:

/*! http://tinynav.viljamis.com v1.1 by @viljamis */
(function ($, window, i) {
 "use strict";
$.fn.tinyNav = function (options) {
// Default settings
var settings = $.extend({
  'active' : 'active', // String: Set the "active" class
  'header' : '', // String: Specify text for "header" and show header instead of the active item
  'label'  : '' // String: sets the <label> text for the <select> (if not set, no label will be added)
}, options);
return this.each(function () {
  // Used for namespacing
  i++;
  var $nav = $(this),
    // Namespacing
    namespace = 'tinynav',
    namespace_i = namespace + i,
    l_namespace_i = '.l_' + namespace_i,
    $select = $('<select/>').attr("id", namespace_i).addClass(namespace + ' ' + namespace_i);
  if ($nav.is('ul,ol')) {
    if (settings.header !== '') {
      $select.append(
        $('<option/>').text(settings.header)
      );
    }
    // Build options
    var options = '';
    $nav
      .addClass('l_' + namespace_i)
      .find('a')
      .each(function () {
        options += '<option value="' + $(this).attr('href') + '">';
        var j;
        for (j = 0; j < $(this).parents('ul, ol').length - 1; j++) {
          options += '- ';
        }
        options += $(this).text() + '</option>';
      });
    // Append options into a select
    $select.append(options);
    // Select the active item
    if (!settings.header) {
      $select
        .find(':eq(' + $(l_namespace_i + ' li')
        .index($(l_namespace_i + ' li.' + settings.active)) + ')')
        .attr('selected', true);
    }
    // Change window location
    $select.change(function () {
      window.location.href = $(this).val();
    });
    // Inject select
    $(l_namespace_i).after($select);
    // Inject label
    if (settings.label) {
      $select.before(
        $("<label/>")
          .attr("for", namespace_i)
          .addClass(namespace + '_label ' + namespace_i + '_label')
          .append(settings.label)
      );
    }
  }
});
};
})(jQuery, this, 0);

jQuery(function () {
 "use strict";
 jQuery("#primary_navigation").tinyNav();
});

Answer 1

我解决了这个问题。我在那里有额外的css，这导致了冲突。

删除：.nav>li>a:hover { display: none; }解决问题