Better dropdown with bootstrap

Question

I try to use dropdowns of bootstrap, it's work the problem is esthetic. :

http://twitter.github.io/bootstrap/javascript.html#dropdowns

I have this code :

<div class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     <?php
         foreach ($collectivite as $key => $value) {
              echo '<form method="post" action="wbx.php"><li><button type="submit" class="btn" style="margin:0px;" name="cookie" value='.$value.'>'.$value.'</button>    </li></form>';
         }

      ?>
   </ul>
</div>

WITHOUT PHP :

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <form method="post" action="wbx.php">
            <li>
                <button type="submit" class="btn" style="margin:0px;" name="cookie" value=heeloWorld.net>world.net</button>
            </li>
        </form>                    
    </ul>
</div>

But the result is very basic... not really good. I use button because i submit some data with form So if i want something like this, how can i do ?

EDIT solution

I Use this : the alert is ok, i have the good value, but the submit doesn't work.

<?php
    foreach ($collectivite as $key => $value) {
        $name = preg_replace('#[^0-9a-z]+#i', '', $value);
        echo '<form method="post" action="wbx.php" id='.$name.'>
            <input type="hidden"  name="cookie"   value='.$value.'>
        </form>';
    }
?>
<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b     class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <?php
            foreach ($collectivite as $key => $value) {
                    $name = preg_replace('#[^0-9a-z]+#i', '', $value);

                    echo '<li>
                        <input type="hidden"  name="cookie"   value='.$value.'>
                        <a class="myformlink" data-formname="#'.$name.'" >'.$value.'</a>
                    </li>';
            }

        ?>
    </ul>
</div>
<script type="text/javascript">
        $(document).ready(function() {
        $('.myformlink').click(function(){
            $($(this).data('formname')).submit();
        });
    });
</script>

Answer 1

You do not have to use a button tu submit your form. You can use a regular anchor to do it. please check this link : i want a anchor should act like and input type submit button

this way your dropdown will look like the one in your example.

Hope it helps :)

Edit : In French we write "Collectivités" ;) just kiddin...

EDIT : sample of a code with data attributes

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b     class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <form method="post" action="wbx.php" id="formGujanMestras">
            <li>
                <a class="myformlink" id="linkC" data-formname="#formGujanMestras">value1</a>
            </li>
        </form>
        <form method="post" action="wbx.php" id="formLaHume">
            <li>
                <a class="myformlink" id="linkD" data-formname="#formLaHume">value2</a>
            </li>
        </form>
    </ul>
</div>
<script type="text/javascript">
        $(document).ready(function() {
        $('.myformlink').click(function(){
            alert('hey martial i gonna submit ' + $(this).data('formname'));
            $($(this).data('formname')).submit();
        });
    });
</script>