How to have sub-dropdown in media-rigtht div?

[legreco]

Example code

 <div class="media-right">
                        <div class="dropdown open" >
                            <button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown"><span class="glyphicon glyphicon-option-vertical"></span></button>
                            <ul class="dropdown-menu dropdown-position-bottomright">
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">JavaScript</a></li>
                            </ul>
                        </div>

                    </div>

When i click on the button, the whole notification dropdown is closed.
How can i prevent this?