A demo of using in Bootstrap tabs

Bootstrap Code

Output

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<style>
.dropdown-menu{
    background-color: #A8DEEE;
    border: 1px solid #428BCA;
}
.divider{
    border: 1px dashed #428BCA;
}
</style>
</head>
<body>

  <div class="container">
    
     <h3>A demo of using with button group</h3>


<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#java" role="tab" data-toggle="tab">Java</a></li>
  <li><a href="#csharp" role="tab" data-toggle="tab">C#</a></li>
  <li><a href="#mysql" role="tab" data-toggle="tab">MySQL</a></li>

<li class="dropdown">
            <div class="btn-group">
            <button class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#">Web</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
             <span class="sr-only"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#jquery" role="tab" data-toggle="tab">jQuery</a></li>
                <li><a href="#boots" role="tab" data-toggle="tab">Bootstrap</a></li>
                <li><a href="#html" role="tab" data-toggle="tab">HTML</a></li>
            </ul>
            </div>            
</li>
  
</ul>
</li>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">Content for home page here</div>
  <div class="tab-pane" id="java">Java is a programming language!</div>
  <div class="tab-pane" id="csharp">C# is also a programming language</div>
  <div class="tab-pane" id="mysql">MySQL is a databased mostly used for web applications.</div>
  <div class="tab-pane" id="jquery">jQuery content here </div>
  <div class="tab-pane" id="boots">Bootstrap Content here</div>
  <div class="tab-pane" id="html">Hypertext Markup Language</div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="js/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>



</body>
</html>

A demo of using with button group

Content for home page here

Java is a programming language!

C# is also a programming language

MySQL is a databased mostly used for web applications.

jQuery content here

Bootstrap Content here

Hypertext Markup Language