第二堂课的下拉菜单

时间:2016-11-14 13:30:41

标签: html css twitter-bootstrap

所有下拉菜单都声明了保证金,但我希望其中一个有不同的保证金,所以我添加了第二个类:

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;
   }
 }

但是menueventi不起作用,在浏览器上这个类没有出现在html代码中。

任何想法?

1 个答案:

答案 0 :(得分:0)

<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>

链路: - http://getbootstrap.com/2.3.2/components.html