How to make dropdown expand clicking on the button element?
<p>Currently the dropdown menu appears only if I click on the img tag. How to make it appear when I click on the button tag? Here is my code:</p>

<pre><code>&lt;div class="btn btn-link dropdown account-menu-btn"&gt;
                &lt;a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
                    &lt;img src="~/Assets/profile_pic.jpg" class="img-circle"&gt;
                &lt;/a&gt;
                &lt;ul class="dropdown-menu pull-right" role="menu"&gt;
                    &lt;li&gt;
                        &lt;a href="#"&gt;
                            Create
                        &lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
</code></pre>

<p>I modified the code using data-target, but I still need to click on the image and not on the button to expand the dropdown menu. Any sugestions?</p>

<pre><code>&lt;div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal"&gt;
                &lt;a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
                    &lt;img src="~/Assets/profile_pic.jpg" class="img-circle"&gt;
                &lt;/a&gt;
                &lt;ul id="myModal" class="dropdown-menu pull-right" role="menu"&gt;
                    &lt;li&gt;
                        &lt;a href='@Url.Action("About", "Home")'&gt;
                            Create
                        &lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
</code></pre>