html - 下拉子菜单即使在将其添加到 CSS 并在 html 中实现后也不起作用

Question

我正在使用 Bootstrap v3.0.0。我知道这不支持下拉子菜单。在 stackoverflow 和其他来源上发布的许多解决方案提供了我添加到我的 Bootstrap.css 的“下拉子菜单”CSS，并且还对我的 HTML 进行了更改。

这是我的 HTML:

 <li id="navPayments" class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Movies<b class="caret"></b></a>
        <ul class="dropdown-menu">
           <li class="dropdown-submenu">
               <a tabindex="-1" href="#">Scary</a>
               <ul class="dropdown-menu">
                   <li style="display: block; width: 100%">@this.Html.ActionLink("Voilent", "Voilent", "Movies")</li>
                   <li style="display: block; width: 100%">@this.Html.ActionLink("Extortion", "Extortion", "Movies")</li>
                   <li style="display: block; width: 100%">@this.Html.ActionLink("Evil", "Evil", "Movies")</li>
               </ul>
            </li>   
        </ul>
    </li>

这是 CSS:

.dropdown-submenu{
    position:relative;
}

.dropdown-submenu > .dropdown-menu
{
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu{
    display:block;
}
.dropdown-submenu > a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
    border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
    float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

我看到菜单 Scary inder Movies，但当我将鼠标悬停在该菜单上时，它没有调出子菜单。我不确定我在这里错过了什么。而且它也没有显示“可怕”菜单旁边的小右箭头。

Answer 1

看起来您正在使用 Skelly's sub menu dropdown solution
这是带有注释的精简版^†，因此您可以遵循每条规则:

HTML:

<!-- Parent Menu -->
<ul class="dropdown-menu" id="parentMenu"
    role="menu" aria-labelledby="dropdownMenu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>

    <!-- Child Menu -->
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a href="#">Second level</a></li>
            <li><a href="#">Second level</a></li>
        </ul>
    </li>
</ul>

CSS:

/* Helps position submenu */
.dropdown-submenu {
    position: relative;
}

/* Positions and styles child menu */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius:0 6px 6px 6px;
       -moz-border-radius:0 6px 6px 6px;
            border-radius:0 6px 6px 6px;
}

/* Makes submenu visible when hovering */
.dropdown-submenu:hover > .dropdown-menu {
    display:block;
}

/* Adds caret to submenu links */
.dropdown-submenu>a:after {
    float: right;
    content: "►";
}

<子>†拿出来爽css triangle以及带有 pull-left 类的左开菜单的漂亮格式。

Demo in jsFiddle

---

将此版本与您的输出进行比较。
试着转换它直到它坏掉，然后告诉我们你在哪里卡住了。
_{PS: 好像是 working just fine}