CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
Joseph
Joseph

Reputation: 7785

DropDown SubMenu In Bootstrap Doesn't Work

I need help in making this dropdown works. When i clicked the "Program" menu, it should show the dropdown submenu. I put some codes in it but it doesn't work. By the way, i'm using bootstrap framework.

#sidebar-wrapper{
    z-index:  1;
    position: absolute;
    width:  230px;
    height:  100%;
    overflow-y:  hidden;
    background: #2b6698;
    opacity: 0.9;
}

#sidebar-wrapper h2{
    color: white;
    padding-left: 30px;
}

.sidebar-nav{
    padding:  0;
    list-style: none;
    margin-top: 30px;
}

.sidebar-nav li{
    text-indent: 13px;
    line-height: 40px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.sidebar-nav li a::after{

    font-family: FontAwesome;
    content:  '\f0d7';
    float: right;
    padding-right: 20px;

}

.sidebar-nav li a{
    display:  block;
    text-decoration: none;
    color:  #FFF;
    padding: 5px 0 5px 0px;
    font-size:13px;
    outline:none;
}

.sidebar-nav li a:hover{
    background: #1F496C;
}

.sidebar-nav > .active{
     background: #1F496C;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
    <h2> Dashboard </h2>
        <ul class="sidebar-nav dropdown">
            <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg move"></i>Program</a></li>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>
            <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
        </ul>
    </div>

Upvotes: 1

Views: 2637

Answers (3)

Ritu Agrawal
Ritu Agrawal

Reputation: 24

You have to change your html little bit and must add bootstrap js file-https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

- Below is html -

<div id="sidebar-wrapper">
    <h2> Dashboard </h2>
        <ul class="sidebar-nav dropdown">
            <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg move"></i>Program</a>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul></li>
            <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
        </ul>
    </div>

CSS

below css should be add in your css file.

#sidebar-wrapper .dropdown-menu {
     position: relative; 
     float:none;
     background-color:#1F496C;
}

Here is a working fiddle: https://jsfiddle.net/rituagrawal01/1b8b8avs/

Thanks-:

Upvotes: 1

Evan
Evan

Reputation: 571

Fix this. You must put the ul nest of li tag.

<ul class="sidebar-nav dropdown">
  <li class="active">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-user fa-lg move"></i>Program
    </a>
    <ul class="dropdown-menu">
       <li><a href="#">HTML</a></li>
       <li><a href="#">CSS</a></li>
       <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
</ul>

Upvotes: 0

Daniel Azamar
Daniel Azamar

Reputation: 692

Look a this... I used it and it works...

Multi-level Drop Down - Tryit Editor v3.5

Upvotes: 0

Related Questions