title: Styling dropdown-menu item that has to call a POST action
body: <p>My ASP.NET MVC5 application uses a Twitter Bootstrap <code>navbar</code> at the top. One item in the navigation bar is a <code>dropdown-menu</code> for logged in users. Inside the dropdown is an <code>ActionLink</code> to the profile page, and another item to Log Off.</p>
  
  <p>The Log Off action is following <a href="https://stackoverflow.com/a/14587231/419956">this advice</a> thus calling a <code>HttpPost</code> action, meaning it can't use a plain <code>ActionLink</code>. Instead I use a <code>BeginForm</code> and a <code>input</code> of <code>type=submit</code>. The Razor view looks like this:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" data-toggle="dopdown" class="dropdown-toggle"&gt;
              John Doe &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;
                  @Html.ActionLink("Account", "Index", "Account")
              &lt;/li&gt;
              &lt;li&gt;
                  @using (Html.BeginForm("Logout", "Account", FormMethod.Post))
                  {
                    &lt;input type="submit" value="LogOff" class="btn btn-default navbar-btn"/&gt;
                  }
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>However, this renders like so:</p>
  
  <p><a href="https://i.stack.imgur.com/f2M4o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f2M4o.png" alt="rendered dropdown-menu"></a></p>
  
  <p>I've tried replacing the <code>&lt;input type="submit" /&gt;</code> with this:</p>
  
  <pre><code>&lt;a href="#" onclick="$(this).closest('form').submit(); return false;"&gt;LogOff&lt;/a&gt;
  </code></pre>
  
  <p>However, the <code>form</code> element that wraps this <code>a</code> tag breaks Bootstrap styling as well, rendering like this:</p>
  
  <p><a href="https://i.stack.imgur.com/EmJeO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EmJeO.png" alt="rendered dropdown-menu after changing code"></a></p>
  
  <p><strong>What's the proper way to handle this?</strong></p>
  
  <p>I'm asking this the way I did above, because I'd prefer a solution that keeps my Razor view at least as simple as it is now, but preferably even make it simpler. Perhaps there's a <code>Html</code> helper method I've overlooked that could do what I need in a way that the rendered markup is picked up by Bootstrap?</p>
  
  <hr>
  
  <p>As a footnote, here's a <a href="/questions/tagged/html" class="post-tag" title="show questions tagged &#39;html&#39;" rel="tag">html</a>+<a href="/questions/tagged/css" class="post-tag" title="show questions tagged &#39;css&#39;" rel="tag">css</a> repro to fiddle with.</p>
  
  <p><strong>Warning:</strong> the width of Stack Overflow snippets tends to trigger Bootstrap's responsiveness features, which may alter the view slightly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class="dropdown"&gt; 
                  &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;
                      John Doe
                      &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Profile&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;form action="xyz" method="POST"&gt;
                              &lt;input type="submit" value="LogOff" class="btn btn-default navbar-btn" /&gt;
                          &lt;/form&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>