dropdown-menu with a second class

Question

All dropdown-menu have margin declared, but i want one of them to have different margin, so i have added a second class:

html:

<li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#"  role="button" aria-haspopup="true" href="#">Matrimoni</a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a href="matrimoni.html" role="menuitem">Panoramica</a></li>
                        <li role="presentation"><a href="format.html" role="menuitem">Format</a></li>
                        <li role="presentation"><a href="ambienti.html" role="menuitem">Ambienti</a></li>
                        <li role="presentation"><a href="patner.html" role="menuitem">Patner</a></li>
                    </ul>
                 </li>

                <li class="dropdown" role="menu">   
                    <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#"  role="button" aria-haspopup="true" href="#">Eventi</a>
                    <ul class="dropdown-menu menueventi">
                        <li role="presentation"><a  href="eventiprivati.html" role="menuitem">Privati</a></li>
                        <li role="presentation"><a href="eventibuisness.html" role="menuitem">Buisness</a></li>
                        <li role="presentation"><a href="eventispeciali.html" role="menuitem">Eventi Speciali</a></li>
                    </ul>
                </li>

css:

 @media (max-width: 980px) {    
   .nav > li > a {  
      width:88px; 
   }
   ul .dropdown-menu {
      margin-left:-31px;
   }
 }

@media (max-width: 862px) {
   .nav > li > a {
      width:auto; 
      padding: 3px 3px;
   }

   .menueventi{
      margin-left:-47px;
   }
 }

but the menueventi does not work, on the browser this class does not appear in the html code.

any ideas?

Answer 1

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

link:- http://getbootstrap.com/2.3.2/components.html