Question

我正在使用标准的Bootstrap class =“nav navbar-nav”进行带下拉菜单的导航：

<ul class="nav navbar-nav">
    <li role="presentation" class="@Html.IsSelected("Appointments", "selected")">
        <a data-toggle="dropdown" href="#"><img src="/Content/images/nav_appts.png" style="padding: 0px 5px 3px 0px;">Appointments<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li>@Html.ActionLink("Appointments Page 1", "Index", "Appointments")</li>
            <li>@Html.ActionLink("Appointments Page 2", "Page2", "Appointments")</li>
        </ul>
    </li>
    // more menu items
</ul>

开箱即用，只有点击它们才会显示下拉列表。如果你盘旋，我找到了让它们出现的方法。在css中：

/* causes the dropdowns to be displayed on-hover instead of on-click */
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block; 
}

这在标准大屏幕上效果很好。但是一旦屏幕变成平板电脑尺寸，导航就会切换到带有条形图的框，以显示导航。一旦我们到达这里，我不希望子菜单项出现在悬停状态。据我所知，在大多数平板电脑上，“悬停”的概念并不存在，因为没有鼠标。尽管如此，如果有人使用非常小的笔记本电脑（等等）的网站，我希望能够控制这个。我试过这个：

@media screen and (max-width: 830px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: inline; 
     }
}

我玩了几个其他的选择，但我似乎无法做对。

Answer 1

使用两个不同宽度的规则，因此每个规则都适用于屏幕尺寸：

@media screen and (min-width: 831px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block; 
     }
}

@media screen and (max-width: 830px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: inline; 
     }
}

ASP MVC Bootstrap导航下拉列表：悬停在大屏幕上，点击小

1 个答案: