Drop down menu collapsing in css
<p>I was using the code snippet from </p>

<p><a href="http://bootsnipp.com/snippets/featured/advanced-dropdown-search" rel="nofollow">http://bootsnipp.com/snippets/featured/advanced-dropdown-search</a></p>

<p>I made the following changes to the code</p>

<pre><code> &lt;div class="col-md-12"&gt;
            &lt;form action="./" method="POST" autocomplete="on"&gt;
                &lt;div class="input-group" id="adv-search"&gt;
                    &lt;input type="text" class="form-control"
                        placeholder="Search for snippets" id="mainForm" name="searchBox" /&gt;
                    &lt;div class="input-group-btn"&gt;
                        &lt;div class="btn-group" role="group"&gt;
                            &lt;div class="dropdown dropdown-lg"&gt;
                                &lt;button type="button" class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown" aria-expanded="false"&gt;
                                    &lt;span class="caret"&gt;&lt;/span&gt;
                                &lt;/button&gt;
                                &lt;span class="dropdown-menu dropdown-menu-right" role="menu"&gt;
                                    &lt;div class="form-horizontal" role="form"&gt;
                                        &lt;div class="form-group"&gt;
                                            &lt;label for="filter"&gt;Filter by&lt;/label&gt; &lt;select
                                                class="form-control" name="docType"&gt;
                                                &lt;option value="0" selected&gt;All Sources&lt;/option&gt;
                                                &lt;option value="1"&gt;Option 1&lt;/option&gt;
                                                &lt;option value="2"&gt;Option 2&lt;/option&gt;

                                            &lt;/select&gt;
                                        &lt;/div&gt;
                                        &lt;div class="form-group"&gt;
                                            &lt;label for="contain"&gt;Author / Modifier&lt;/label&gt; &lt;input
                                                class="form-control" type="text" name="authorName" /&gt;
                                        &lt;/div&gt;
                                        &lt;div class="form-group"&gt;
                                            &lt;label for="contain"&gt;Contains the words&lt;/label&gt; &lt;input
                                                class="form-control" type="text" name="words" /&gt;
                                        &lt;/div&gt;
                                        &lt;!-- &lt;button type="submit" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt; --&gt;
                                    &lt;/div&gt;
                                &lt;/span&gt;
                            &lt;/div&gt;
                            &lt;button type="submit" class="btn btn-primary"&gt;
                                &lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;
                            &lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
</code></pre>

<p>After shifting the form tag above, the drop down menu is collapsing by just clicking anywhere on the dropdown.</p>

<p>Can someone please explain why?</p>

<p>I tried doing a lot of changes but nothing worked for me.</p>

<p><a href="https://jsfiddle.net/tj2y5ptp/" rel="nofollow">https://jsfiddle.net/tj2y5ptp/</a></p>