Bootstrap show 3rd level menu options on hover

Question

i currently trying to have a hover effect on the sub-menu on the side bar when i'm trying to hover over the sidebar. But i'm failed to do so because i'm trying to add another inside the

element, it does not show up a new sub sub menu. I'm using bootstrap 3.0.2 version and AdminLte template with AdminLte version 1.2 css.

Here is the side bar code:

  <ul class="sidebar-menu">
                        <li class="active">
                            <a href="index.php">
                                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-th"></i> 
                                <span>Independent Upload</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Pahang</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Perak</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Perlis</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Putrajaya</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Pulau Pinang</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Negeri Sembilan</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Melaka</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Kedah</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Kuala Lumpur</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Kelantan</a></li>
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Terengganu</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Selangor</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Johor</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-bar-chart-o"></i>
                                <span>Charts</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/charts/morris.html"><i class="fa fa-angle-double-right"></i> Morris</a></li>
                                <li><a href="pages/charts/flot.html"><i class="fa fa-angle-double-right"></i> Flot</a></li>
                                <li><a href="pages/charts/inline.html"><i class="fa fa-angle-double-right"></i> Inline charts</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-laptop"></i>
                                <span>UI Elements</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/UI/general.html"><i class="fa fa-angle-double-right"></i> General</a></li>
                                <li><a href="pages/UI/icons.html"><i class="fa fa-angle-double-right"></i> Icons</a></li>
                                <li><a href="pages/UI/buttons.html"><i class="fa fa-angle-double-right"></i> Buttons</a></li>
                                <li><a href="pages/UI/sliders.html"><i class="fa fa-angle-double-right"></i> Sliders</a></li>
                                <li><a href="pages/UI/timeline.html"><i class="fa fa-angle-double-right"></i> Timeline</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-edit"></i> <span>Forms</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/forms/general.html"><i class="fa fa-angle-double-right"></i> General Elements</a></li>
                                <li><a href="pages/forms/advanced.html"><i class="fa fa-angle-double-right"></i> Advanced Elements</a></li>
                                <li><a href="pages/forms/editors.html"><i class="fa fa-angle-double-right"></i> Editors</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-table"></i> <span>Tables</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/tables/simple.html"><i class="fa fa-angle-double-right"></i> Simple tables</a></li>
                                <li><a href="pages/tables/data.html"><i class="fa fa-angle-double-right"></i> Data tables</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="pages/calendar.html">
                                <i class="fa fa-calendar"></i> <span>Calendar</span>
                                <small class="badge pull-right bg-red">3</small>
                            </a>
                        </li>
                        <li>
                            <a href="pages/mailbox.html">
                                <i class="fa fa-envelope"></i> <span>Mailbox</span>
                                <small class="badge pull-right bg-yellow">12</small>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-folder"></i> <span>Examples</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="pages/examples/invoice.html"><i class="fa fa-angle-double-right"></i> Invoice</a></li>
                                <li><a href="pages/examples/login.html"><i class="fa fa-angle-double-right"></i> Login</a></li>
                                <li><a href="pages/examples/register.html"><i class="fa fa-angle-double-right"></i> Register</a></li>
                                <li><a href="pages/examples/lockscreen.html"><i class="fa fa-angle-double-right"></i> Lockscreen</a></li>
                                <li><a href="pages/examples/404.html"><i class="fa fa-angle-double-right"></i> 404 Error</a></li>
                                <li><a href="pages/examples/500.html"><i class="fa fa-angle-double-right"></i> 500 Error</a></li>
                                <li><a href="pages/examples/blank.html"><i class="fa fa-angle-double-right"></i> Blank Page</a></li>
                            </ul>
                        </li>
                    </ul>

Here is the css code for the sidebar:

.sidebar {
  margin-bottom: 5px;
}
.sidebar .sidebar-form input:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: transparent!important;
}
.sidebar .sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar .sidebar-menu > li {
  margin: 0;
  padding: 0;
}
.sidebar .sidebar-menu > li > a {
  padding: 12px 5px 12px 15px;
  display: block;
}
.sidebar .sidebar-menu > li > a > .fa,
.sidebar .sidebar-menu > li > a > .glyphicon,
.sidebar .sidebar-menu > li > a > .ion {
  width: 20px;
}
.sidebar .sidebar-menu .treeview-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar .sidebar-menu .treeview-menu > li {
  margin: 0;
}
.sidebar .sidebar-menu .treeview-menu > li > a {
  padding: 5px 5px 5px 15px;
  display: block;
  font-size: 14px;
  margin: 0px 0px;
}
.sidebar .sidebar-menu .treeview-menu > li > a > .fa,
.sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar .sidebar-menu .treeview-menu > li > a > .ion {
  width: 20px;
}

What I wanted to do is when I hover to "Pahang" then a new sub menu. Is that possible to do it on bootstrap 3.0.2? I'm still new to the bootstrap framework, so I does not know much of the advance tagging inside it. Please guide me through this.

Upvotes: 0

Views: 2886

Answer 1

Here is an example of sidebar menu

HTML structure:

<ul class="nav">
    <li><a href="#" data-toggle="collapse" data-target="#sub1">Link 4<b class="caret pull-right"></b></a>
        <ul class="nav collapse" id="sub1">
            <li><a href="#">Sub Link 1</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle">Sub Link 2<b class="caret-right pull-right"></b></a>
                    <ul class="nav dropdown-menu" id="subsub1">
                        <li><a href="#">Link 4.2.1</a></li>

2nd level menu margin:

.sidebar-offcanvas .nav .nav.collapse,
.sidebar-offcanvas .nav .nav.collapsing {
    margin-left: 5%;
    background-color: #f8f8f8;
}

Positioning of 3nd level menu and making it appear on hover:

.sidebar-offcanvas .nav .nav.collapse .nav {
    position: absolute;
    top: 0;
    left: 155px;
    z-index: 100;
    background-color: #f8f8f8;
}
.dropdown:hover .dropdown-menu {
    display: block;
}

Then we need to specify css for sideways caret to make it targeting to the right and right aligned:

.caret.pull-right,
.caret-right.pull-right {
    margin-top: 9px;
}
.caret-right {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-left: 4px solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

The menu appearance:

Demo fiddle is here