For anybody looking for a way to do this from the code behind, you can add the extra list item there by using the `Insert` function and specifying an `Index` of 0, as mentioned in this [SO Question](https://stackoverflow.com/a/81379/1366033).  Just make sure to do so after you've called `DataBind()`



    myDropDownList.DataSource = DataAccess.GetDropDownItems(); // Psuedo Code
    myDropDownList.DataTextField = "Value";
    myDropDownList.DataValueField = "Id";
    myDropDownList.DataBind();
    
    myDropDownList.Items.Insert(0, new ListItem("Please select", ""));

For my ASP.NET page, in the code behind I load various items/options into a DropDownList but I do not set a default by assigning SelectedIndex. I notice for the postback SelectedIndex is set to 0, even if I never set focus to or changed the value in the DropDownList.

If not otherwise specified in the code behind or markup, will a default value of 0 be used for the SelectedIndex in a postback with a DropDownList? If yes, is this part of the HTML standard for selection lists, or is this just the way it is implemented for ASP.NET?

ASP.NET DropDownList / HTML select list default selection

From the events section of the [*Bootstrap* `dropdown`][dropdown] documentation:

> **`hide.bs.dropdown`**: This event is fired immediately when the hide instance method has been called.

For starters, to prevent the dropdown from closing, we can just listen to this event and stop it from proceeding by returning `false`:



    $('#myDropdown').on('hide.bs.dropdown', function () {
        return false;
    });


----------

For a complete solution, you probably want to allow it to close when the dropdown itself is clicked.  So only *some of the time* we'll want to prevent the box from closing.  

To do this we'll set [`.data()`][data] flags in two more events raised by the dropdown:

* **`shown.bs.dropdown`** - When shown, we'll set `.data('closable')` to **`false`**
* **`click`** - When clicked, we'll set `.data('closable')` to **`true`**

Thus, if the `hide.bs.dropdown` event was raised by a `click` on the dropdown, we'll allow a close.

[Live Demo in jsFiddle][fiddle]
===

**JavaScript**



    $('.dropdown.keep-open').on({
        "shown.bs.dropdown": function() { this.closable = false; },
        "click":             function() { this.closable = true; },
        "hide.bs.dropdown":  function() { return this.closable; }
    });

**HTML** *(note I've added the class `keep-open` to the dropdown)*



<pre><code>&lt;div class=&quot;dropdown <b>keep-open</b>&quot;&gt;
    &lt;!-- Dropdown Button --&gt;
    &lt;button id=&quot;dLabel&quot; role=&quot;button&quot; href=&quot;#&quot; class=&quot;btn btn-primary&quot;
            data-toggle=&quot;dropdown&quot; data-target=&quot;#&quot; &gt;
        Dropdown &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;

    &lt;!-- Dropdown Menu --&gt;
    &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dLabel&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

[dropdown]: http://getbootstrap.com/javascript/#dropdowns
[fiddle]: http://jsfiddle.net/KyleMit/ZS4L7/
[data]: http://api.jquery.com/data/

If the dropdown is visible, and I click outside the dropdown it closes. I need it to not close.

From the documentation:

> When opened, the plugin also adds **.dropdown-backdrop** as a click area for closing dropdown menus when clicking outside the menu.

What JavaScript can I add to prevent the drop down from closing?

 

Keep Bootstrap Dropdown Open When Clicked Off

It should work without overriding the `overflow` property of `.tab content`.  The only other thing I noticed is that you're initializing tabs for the class `tabs-student`, but that class doesn't exist in your markup.  I think that's probably what you intended in the `ul` element with `.tabs-s`.  When I changed that, everything works just fine.

[See this jsFiddle][fiddle]
====

This **JavaScript**:



    $('.tabs-student a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

Should correspond to this **HTML**:



    <ul class="nav nav-tabs tabs-student">
      <li class="active"><a href="#tab-activity">Activity</a></li>
      <li class=""><a href="#tab-sales">Sales</a></li>
    </ul>

Should look like this:

![demo][demo]

[fiddle]: http://jsfiddle.net/KyleMit/aAqsX/
[demo]: http://i.imgur.com/ftuMXC9.png

I have `tabs`, where I put a `dropdown` element inside. The problem is, the dropdown list is not visible. Open/close event is working, but I don't see the list. If i move the dropdown outside the tabs, it is working. What's going on ?

**JavaScript**



    $(document).ready(function () {
        $('.tabs-student a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });

**HTML**



    <ul class="nav nav-tabs tabs-s">
      <li class="active"><a href="#tab-activity">A</a></li>
      <li class=""><a href="#tab-sales">B</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab-activity">
          <div class="btn-group left">
              <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">test1
                  <span class="caret caret-fix"></span>
               </button>
               <ul class="dropdown-menu class-list scrollable-menu center">
                  <li><label id="1" class="link active">test1</label></li>
                  <li><label id="2" class="link">test2</label></li>
               </ul>
           </div>
      </div>
      <div class="tab-pane" id="tab-sales">
         test
      </div>
    </div>

Bootstrap dropdown inside tabs is not visible

When the dropdown is open, it will have the `open` class added to the parent dropdown element.  You can use that to selectively style a closed / open dropdown.

For example, take the following **HTML**:



    <div class="dropdown">

        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Action <span class="caret"></span>
        </button>

        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>

    </div>

We can add a color property to the dropdown and then change the color property when open using the following **CSS**: *(*you might have to use `!important` if the button is styled*)



    .dropdown > button {
        color: yellow;
    }
    .dropdown.open > button {
        color: orange;
    }

[Working Demo in JsFiddle][fiddle]
===

Which will look like this:

![screenshot][screenshot]

If you only wanted to change the style while closed you could use the [`:not`][not] pseudo class selector like this:



    .dropdown:not(.open) > button {}

[fiddle]: http://jsfiddle.net/KyleMit/6gNER/
[screenshot]: http://i.imgur.com/IVID2fW.png
[not]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Where can I change color of text in collapsed dropdown? For some reason there's different background and text colors in my dropdown menu when its collapsed.

When not collapsed I can change it with:



    .navbar-inverse .navbar-nav > li > a {
      color: #000;
    }

But when collapsed it won't change. Am I missing something simple?

Change color of text in collapsed dropdown

It looks like you're using [Skelly's sub menu dropdown solution][Skelly SubMenu]  
Here is a stripped down<sup>†</sup> version with comments so you can follow along with each rule:

**HTML**:

    
    <ul class="dropdown-menu" id="parentMenu"
        role="menu" aria-labelledby="dropdownMenu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        
        
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Second level</a></li>
                <li><a href="#">Second level</a></li>
                <li><a href="#">Second level</a></li>
            </ul>
        </li>
    </ul>

**CSS**: 



    /* Helps position submenu */
    .dropdown-submenu {
        position: relative;
    }

    /* Positions and styles child menu */
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius:0 6px 6px 6px;
           -moz-border-radius:0 6px 6px 6px;
                border-radius:0 6px 6px 6px;
    }

    /* Makes submenu visible when hovering */
    .dropdown-submenu:hover > .dropdown-menu {
        display:block;
    }

    /* Adds caret to submenu links */
    .dropdown-submenu>a:after {
        float: right;
        content: "►";
    }

<sub>†
Took out cool [css triangle][css triangle] and pretty formatting for left opening menus with `pull-left` class.
</sub>

## [Demo in jsFiddle][fiddle]

[![Screenshot][Screenshot]][fiddle-demo]


-------


Compare this version with your output.  
Try to convert it over until it breaks, and tell us where you get stuck.  
<sub>PS: It looks like it's **[working just fine**][working version]</sub>

[Skelly SubMenu]: https://stackoverflow.com/a/18024991/1366033
[fiddle]: http://jsfiddle.net/KyleMit/Buwm8/
[fiddle-demo]: http://jsfiddle.net/KyleMit/Buwm8/show/light
[Screenshot]: http://i.imgur.com/MupxGvp.png

[css triangle]: http://css-tricks.com/snippets/css/css-triangle/
[working version]:http://jsfiddle.net/KyleMit/Buwm8/1/

I am using bootstrap v3.0.0. I am aware that this does not support dropdown-submenu. Lot of solutions posted on stackoverflow and other sources provided the "dropdown-submenu" CSS that I added to my Bootstrap.css and also made changes to my HTML. 

And here is my HTML:

     <li id="navPayments" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Movies<b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li class="dropdown-submenu">
                   <a tabindex="-1" href="#">Scary</a>
                   <ul class="dropdown-menu">
                       <li style="display: block; width: 100%">@this.Html.ActionLink("Voilent", "Voilent", "Movies")</li>
                       <li style="display: block; width: 100%">@this.Html.ActionLink("Extortion", "Extortion", "Movies")</li>
                       <li style="display: block; width: 100%">@this.Html.ActionLink("Evil", "Evil", "Movies")</li>
                   </ul>
                </li>   
            </ul>
        </li>

Here is the CSS:



    .dropdown-submenu{
        position:relative;
    }
 
    .dropdown-submenu > .dropdown-menu
    {
        top:0;
        left:100%;
        margin-top:-6px;
        margin-left:-1px;
        -webkit-border-radius:0 6px 6px 6px;
        -moz-border-radius:0 6px 6px 6px;
        border-radius:0 6px 6px 6px;
    }
    .dropdown-submenu:hover > .dropdown-menu{
        display:block;
    }
    .dropdown-submenu > a:after{
        display:block;
        content:" ";
        float:right;
        width:0;
        height:0;
        border-color:transparent;
        border-style:solid;
        border-width:5px 0 5px 5px;
        border-left-color:#cccccc;
        margin-top:5px;
        margin-right:-10px;
    }
    .dropdown-submenu:hover > a:after{
        border-left-color:#ffffff;
    }
    .dropdown-submenu .pull-left{
        float:none;
    }
    .dropdown-submenu.pull-left > .dropdown-menu{
        left:-100%;
        margin-left:10px;
        -webkit-border-radius:6px 0 6px 6px;
        -moz-border-radius:6px 0 6px 6px;
        border-radius:6px 0 6px 6px;
    }



I see the menu Scary inder Movies but it does not bring up the sub-menus when I hover over that. I am not sure what I am missing here. And it also does not show the little right arrow beside "Scary" menu.

Dropdown-submenu not functional even after adding it to CSS and implementing in html

Not only is it possible, it's actually much easier to deal with native HTML objects than it is to deal with the mysteries and inconsistencies of styling the `<select>` element.

You just have to listen to the [dropdown open event][1] with `shown.bs.dropdown`.  
Once it's open, just find the only `.active` item and call [`.focus()`][2] to bring it into view.


**Like This**:



    $(".dropdown").on("shown.bs.dropdown", function() {
       $(this).find(".dropdown-menu li.active a").focus()
    });


**Demo in Stack Snippets**:





    $(".dropdown.focus-active").on("shown.bs.dropdown", function() {
       $(this).find(".dropdown-menu li.active a").focus()
    });



    .scrollable-menu {
        height: auto;
        max-height: 200px;
        overflow-x: hidden;
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="container" >

      <div class="dropdown focus-active">
        <a href="#" class="btn btn-primary"
           data-target="#"  data-toggle="dropdown" 
           aria-haspopup="true" role="button" aria-expanded="false">
          Dropdown trigger
          <span class="caret"></span>
        </a>

        <ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
          <li><a href="#">Item 7</a></li>
          <li><a href="#">Item 8</a></li>
          <li class="active"><a href="#">Item 9</a></li>
          <li><a href="#">Item 10</a></li>
          <li><a href="#">Item 11</a></li>
          <li><a href="#">Item 12</a></li>      
        </ul>
      </div>

    </div>



[1]: http://getbootstrap.com/javascript/#dropdowns
[2]: http://api.jquery.com/focus/

Here's a question on how to [center a `<select>` scroll bar to the selected item][1].

I'd like to find a way to do the same thing for a Bootstrap Dropdown Menu so that the menu automatically scrolls to the `.active` list item.

Here's some code:

    <ul>
      <li class="dropdown switch">
        <a href="active" class="dropdown-toggle" data-toggle="dropdown" id="switch-a">
          <span>Name</span>
        </a>
        <ul class="dropdown-menu switch-items" id="switch-dd">
          <li>...</li>
          <li>...</li>
          <li class="active active-dd"></li>
          .
          .
          .
          <li>...</li>
        </ul>
      </li>
    </ul>

Is this possible or do I have to a HTML `<select>` and spending time styling it? 

[1]: https://stackoverflow.com/q/20100359

Center a Bootstrap drop-down select scroll bar to the selected item

The dropdown menu options are notoriously light.  If you want to adjust the shade of the hover effect, you can add your own CSS to match whatever theme you're using.  

Here's how you'd do it for the default theme:



    .btn-group .dropdown-menu li:hover a {
      color: #333;
      background-color: #E6E6E6;
      border-color: #ADADAD;
    }

### Demo in Stack Snippet





    .btn-group .dropdown-menu li:hover a {
      color: #333;
      background-color: #E6E6E6;
      border-color: #ADADAD;
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="btn-group btn-group-lg" role="group" aria-label="...">
      <button type="button" class="btn btn-default">House</button>
      <button type="button" class="btn btn-default">Apartment</button>
      <button type="button" class="btn btn-default">Studio</button>
      <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" 
                data-toggle="dropdown" aria-expanded="false">
          Other <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a>Park</a></li>
          <li><a>Beach</a></li>
          <li><a>Field</a></li>
          <li><a>BackYard</a></li>
          <li><a>FrontYard</a></li>
          <li><a>Other</a></li>
        </ul>
      </div>
    </div>

I nested a drop down menu inside a group of buttons but I'm having a little trouble styling the drop down menu to look like the main buttons. It seems like there should be bootstrap classes to do this without using css?


 1. I want the drop down items to show a dark background when hovered over, just like when the main buttons get hovered over. See pictures below
 2. There looks to be some styling when the main buttons get clicked as well, no styling takes place when the drop down menu items get clicked.
 3. I would like similar text in the drop down as the main buttons

 
I'm just trying to make things look consistent.

Here is my code with a partially working [**Fiddle**][1] and some pics that show the button group with drop down I'm trying to style.





    <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" class="btn btn-default">House</button>
        <button type="button" class="btn btn-default">Apartment</button>
        <button type="button" class="btn btn-default">Studio</button>
        <div class="btn-group btn-group-lg" role="group">
            <button type="button" class="btn btn-default dropdown-toggle" 
                    data-toggle="dropdown" aria-expanded="false">
                Other <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a>Park</a></li>
                <li><a>Beach</a></li>
                <li><a>Field</a></li>
                <li><a>BackYard</a></li>
                <li><a>FrontYard</a></li>
                <li><a>Other</a></li>
            </ul>
        </div>
    </div>




![button group][2]

no highlighting when hovering over drop down menu items.

![no highlighting][3]


  [1]: http://jsfiddle.net/zxnw8245/
  [2]: http://i.stack.imgur.com/QN7Th.jpg
  [3]: http://i.stack.imgur.com/8Qqxk.jpg