1

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

我在 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();
});
4

1 回答 1

0

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

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

于 2013-08-20T16:05:33.543 回答