css - How to turn an HTML navbar <li> into a stand-alone button -


i using bootstrap create website , added functionality drop-down sign newsletter.

how can make drop-down standalone drop-down separate navbar?

i added <button> tags around entire html code sign-up button separates drop-down. ideally, @ bottom of drop-drown.

<button class="dropdown btn">    <a href="http://www.jquery2dotnet.com" class="dropdown-toggle" data-toggle="dropdown">newsletter sign <b class="caret"></b></a>    <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">       <li>          <div class="row">             <div class="col-md-12">                <form class="form" role="form" method="post" action="login" accept-charset="utf-8" id="login-nav">                   <div class="form-group">                      <label class="sr-only" for="newsletter-signup-name">name</label>                      <input type="email" class="form-control" id="newsletter-signup-name" placeholder="name" required>                   </div>                   <div class="form-group">                      <label class="sr-only" for="newsletter-signup-email">email</label>                      <input type="email" class="form-control" id="newsletter-signup-email" placeholder="email address" required>                   </div>                   <div class="checkbox">                      <label>                      <input type="checkbox"> remember me                      </label>                   </div>                   <div class="form-group">                      <button type="submit" class="btn btn-success btn-block">sign up</button>                   </div>                </form>             </div>          </div>       </li>       <li class="divider"></li>    </ul> </button> 

not sure why want encapsulate entire form button. use button instead of anchor if need button.

<div class="dropdown">     <button class="btn dropdown-toggle" data-toggle="dropdown">newsletter sign <b class="caret"></b>     </button>     <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">         <li>             <div class="row">                 <div class="col-md-12">                     <form class="form" role="form" method="post" action="login" accept-charset="utf-8" id="login-nav">                         <div class="form-group">                             <label class="sr-only" for="newsletter-signup-name">name</label>                             <input type="email" class="form-control" id="newsletter-signup-name" placeholder="name" required>                         </div>                         <div class="form-group">                             <label class="sr-only" for="newsletter-signup-email">email</label>                             <input type="email" class="form-control" id="newsletter-signup-email" placeholder="email address" required>                         </div>                         <div class="checkbox">                             <label>                                 <input type="checkbox">remember me</label>                         </div>                         <div class="form-group">                             <button type="submit" class="btn btn-success btn-block">sign up</button>                         </div>                     </form>                 </div>             </div>         </li>         <li class="divider"></li>     </ul> </div> 

http://jsfiddle.net/moogs/sktewe4s/


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -