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

<p>html:</p>

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

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

<p>css:    </p>

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

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

   .menueventi{
      margin-left:-47px;
   }
 }
</code></pre>

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

<p>any ideas?</p>