Navigation :

Tabs with Dropdown Menu


        
            
                
                    
                        
                            Product Informations
                            
                                
                                     Action
                                
                                     Another action
                                
                                     Something else here
                                
                                     Separated link
                            
                        
                    
                
                
                    
                        
                            
                                
                                    
                                        Model
                                        Mark II
                                    
                                
                                
                                    
                                        Power Core:
                                        Palladium Arc Reactor Mark II 
                                    
                                    
                                        Armor Features:
                                        Armor Gauntlet
                                    
                                    
                                        Weapons:
                                        Repulsors (Repulsion Mark I)
                                    
                                
                            
                        
                        
                            
                                
                                    
                                        Model
                                        Mark IV
                                    
                                
                                
                                    
                                        Power Core:
                                        Palladium Arc Reactor Mark III
                                    
                                    
                                        Armor Features:
                                        Super-Strength
                                    
                                    
                                        Weapons:
                                        Unibeam (Chest Repulsor)
                                    
                                
                            
                        
                        
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy
                            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
                            make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                            typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
                            of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                            software like Aldus PageMaker including versions of Lorem Ipsum.
                        
                        
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy
                            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
                            make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                            typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
                            of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                            software like Aldus PageMaker including versions of Lorem Ipsum.

Model	Mark II
Power Core:	Palladium Arc Reactor Mark II
Armor Features:	Armor Gauntlet
Weapons:	Repulsors (Repulsion Mark I)

Model	Mark IV
Power Core:	Palladium Arc Reactor Mark III
Armor Features:	Super-Strength
Weapons:	Unibeam (Chest Repulsor)

                 <div class="container">
        <div class="pills-container box-shadow">
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-pills">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="tablist" aria-haspopup="true" aria-expanded="false">Product Informations</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home"
                                    aria-selected="true">
                                    <i class="fas fa-cogs"></i> Action</a>
                                <a class="dropdown-item" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
                                    aria-selected="false">
                                    <i class="fas fa-cogs"></i> Another action</a>
                                <a class="dropdown-item" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
                                    aria-selected="false">
                                    <i class="fas fa-cogs"></i> Something else here</a>
                                <a class="dropdown-item" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
                                    aria-selected="false">
                                    <i class="fas fa-cogs"></i> Separated link</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-md-12">
                    <div class="tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                            <table class="table table-borderless">
                                <thead>
                                    <tr>
                                        <th scope="col">Model</th>
                                        <th scope="col">Mark II</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">Power Core:</th>
                                        <td>Palladium Arc Reactor Mark II </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Armor Features:</th>
                                        <td>Armor Gauntlet</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Weapons:</th>
                                        <td>Repulsors (Repulsion Mark I)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                            <table class="table table-borderless">
                                <thead>
                                    <tr>
                                        <th scope="col">Model</th>
                                        <th scope="col">Mark IV</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">Power Core:</th>
                                        <td>Palladium Arc Reactor Mark III</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Armor Features:</th>
                                        <td>Super-Strength</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Weapons:</th>
                                        <td>Unibeam (Chest Repulsor)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
                            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
                            make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                            typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
                            of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                            software like Aldus PageMaker including versions of Lorem Ipsum.
                        </div>
                        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
                            text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
                            make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                            typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
                            of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                            software like Aldus PageMaker including versions of Lorem Ipsum.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        body {
            background-color: rgb(245, 245, 245);
        }
        body a,
        body .btn {
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            font-family: 'Montserrat', sans-serif;
        }
        .pills-container {
            padding: 2%;
        }
        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            color: #353535;
            background-color: #ffffff;
            font-weight: 600;
        }
        .nav-pills .nav-link {
            color: #353535;
            background-color: #ffffff;
            font-weight: 600;
            border-radius: 0px;
        }
        .nav-pills {
            padding-bottom: 15px;
        }
        .nav-link {
            display: block;
            padding: .5rem 0rem;
            border-bottom: solid 2px #f39f00;
        }
        .dropdown-menu {
            color: #212529;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-top: 3px #f39f00 solid !important;
            margin-top: 15px;
        }
        .dropdown-item.active,
        .dropdown-item:active {
            color: #fff;
            background-color: #f39f00;
        }
        .dropdown-item {
            color: #212529;
            font-weight: 500;
        }
        .dropdown-menu:before {
            border-bottom: 12px solid #f39f00;
        }
        .dropdown-menu:before {
            display: block;
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            left: 10px;
            bottom: auto;
            -webkit-transform: translate(0, -100%);
            -ms-transform: translate(0, -100%);
            transform: translate(0, -100%);
            width: 0;
            height: 0;
            border-right: 10px solid transparent;
            border-bottom: 12px solid #f39f00;
            border-left: 10px solid transparent;
        }
        .box-shadow {
            border-top: 1px solid #f2f2f2;
            -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
            background-color: #ffffff;
        }
        .table>thead {
            border-bottom: solid 1px #efefef;
        }