Dropdown-submenu not functional even after adding it to CSS and implementing in html

Profile picture for Rishab
Rishab

I am using bootstrap v3.0.0. I am aware that this does not support dropdown-submenu. Lot of solutions posted on stackoverflow and other sources provided the "dropdown-submenu" CSS that I added to my Bootstrap.css and also made changes to my HTML.

And here is my 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>

Here is the CSS:

<!-- language: lang-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;
}

I see the menu Scary inder Movies but it does not bring up the sub-menus when I hover over that. I am not sure what I am missing here. And it also does not show the little right arrow beside "Scary" menu.

It looks like you're using Skelly's sub menu dropdown solution
Here is a stripped down<sup>†</sup> version with comments so you can follow along with each rule:

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:

<!-- language: lang-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: "►";
}

<sub>† Took out cool css triangle and pretty formatting for left opening menus with pull-left class. </sub>

Demo in jsFiddle

Screenshot

Compare this version with your output.
Try to convert it over until it breaks, and tell us where you get stuck.
<sub>PS: It looks like it's **working just fine**</sub>