"Dropdown Menu UI"
Bootstrap 3.2.0 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="nav navbar-nav"> <!-- Split button --> <div class="btn-group dropdown"> <button type="button" class="btn btn-default watch">Action</button> <button type="button" class="btn btn-default dropdown-toggle icon-player" data-toggle="dropdown" style="padding:3px 17px 3px 11px;"> <img style="float:left"class="img-responsive" src="https://s3.amazonaws.com/cloud.ohloh.net/attachments/75891/popcorn-time_med.png"></span> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Popcorn Time <span class="pull-right image"> <img class="img-responsive" src="https://s3.amazonaws.com/cloud.ohloh.net/attachments/75891/popcorn-time_med.png"></span></a></li> <li class="divider"></li> <li><a href="#">VLC <span class="pull-right image"> <img class="img-responsive" src="http://www.icreatemagazine.com/wp-content/uploads/2014/01/VLC.png"></span></a></li> <li class="divider"></li> <li><a href="#">AirPlay <span class="pull-right image"> <img class="img-responsive" src="http://cocoacake.net/blog/wp-content/uploads/2013/03/AirplayIcon.png"></span></a></li> <li class="divider"></li> <li><a href="#">ChromeCast <span class="pull-right image"><img class="img-responsive" src="http://cdn.vlogg.com/wp-content/uploads/2013/12/GoogleChromecastCastIcon.jpg"> </span></a></li> </ul> </div> </ul>
body { background:#f0f0f0; } .nav { left:50%; margin-left:-150px; top:50px; position:absolute; } .nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { background:#fff; } .watch{ width:143px; } .icon-player{ width:56px; } .dropdown { background:#fff; border:1px solid #ccc; border-radius:4px; width:200px; } .dropdown-menu>li>a { color:#428bca; } .dropdown ul.dropdown-menu { border-radius:4px; box-shadow:none; margin-top:20px; width:200px; } .dropdown ul.dropdown-menu:before { content: ""; border-bottom: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -10px; right: 16px; z-index: 10; } .dropdown ul.dropdown-menu:after { content: ""; border-bottom: 12px solid #ccc; border-right: 12px solid transparent; border-left: 12px solid transparent; position: absolute; top: -12px; right: 14px; z-index: 9; } .image{ width:20px; height:20px; }

Related: See More


Questions / Comments: