title: How to add options tabbed menu to mega drop-down menu?
body: <p>I am using a code snippet from <a href="https://bootsnipp.com/snipps/vacation-rentals" rel="nofollow noreferrer">https://bootsnipp.com/snipps/vacation-rentals</a></p>
  
  <p>This snippet provides the user with a chice of 3 options with tabbed menus. </p>
  
  <p>Please check the <strong><a href="https://bootsnipp.com/snipps/vacation-rentals" rel="nofollow noreferrer">website</a></strong> and you will see how this tabbed menu works. </p>
  
  <p><img src="https://i.stack.imgur.com/964lh.png" alt="enter image description here"></p>
  
  <p>This is the code of this snippet</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;div class="span12"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span12"&gt;
                  &lt;div class="tabbable tabs-left"&gt;
  
                      &lt;ul class="nav nav-tabs" style="padding-top:15px;margin-left:-20px;"&gt;
                          &lt;li class="active"&gt;&lt;a href="#A" data-toggle="tab"&gt;Apartman A2(1+1)&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#B" data-toggle="tab"&gt;Apartman A4(2+2)&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#C" data-toggle="tab"&gt;Apartman A6(4+2)&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  
                      &lt;div class="tab-content"&gt;
                          &lt;div class="tab-pane active" id="A"&gt;
                              &lt;img src="http://placehold.it/80x80"&gt;
                          &lt;/div&gt;
                          &lt;div class="tab-pane" id="B"&gt;
                              &lt;img src="http://placehold.it/80x80"&gt;
                          &lt;/div&gt;
                          &lt;div class="tab-pane" id="C"&gt;
                              &lt;img src="http://placehold.it/80x80"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!-- /tabbable --&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  </code></pre>
  
  <p>However, I am trying to add this to my website and it gets effected from the upper li,ul behaviours and it doesn't work.</p>
  
  <p>It becomes like this.</p>
  
  <p><img src="https://i.stack.imgur.com/8dC6D.png" alt="enter image description here"></p>
  
  <p>This is my website <a href="http://www.carantina.com" rel="nofollow noreferrer">http://www.carantina.com</a></p>
  
  <p>Please check <strong>'PRODUCTS'</strong> page and you will see what I mean.</p>
  
  <p>If I can override preceding ul,li tag's style behavior and set them to default bootstrap styles, it may work. But I couldn't do that. </p>