javascript – Bootstrap3 Mega Menu更改下拉宽度

前端之家收集整理的这篇文章主要介绍了javascript – Bootstrap3 Mega Menu更改下拉宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我喜欢知道如何更改bootstrap mega菜单下拉大小以适合引导容器宽度.

我下面附上一张图片,以便更好地了解我想要做的事情.

Boostrap Mega Menu

HTML代码

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">logo</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown menu-large">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <b class="caret"></b> </a>
                  <ul class="dropdown-menu megamenu row">
                    <li>
        <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/150x120" />
          </a>
        </div>
        <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/150x120" />
          </a>
        </div>
        <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/150x120" />
          </a>
        </div>
        <div class="col-sm-6 col-md-3">
         <a href="#" class="thumbnail">
            <img src="http://placehold.it/150x120" />
          </a>
        </div>
                    </li>
                  </ul>
            </li>

            <li class="dropdown menu-large">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>             
                <ul class="dropdown-menu megamenu row">
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">Glyphicons</li>
                            <li><a href="#">Available glyphs</a></li>
                            <li class="disabled"><a href="#">How to use</a></li>
                            <li><a href="#">Examples</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Dropdowns</li>
                            <li><a href="#">Example</a></li>
                            <li><a href="#">Aligninment options</a></li>
                            <li><a href="#">Headers</a></li>
                            <li><a href="#">Disabled menu items</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">Button groups</li>
                            <li><a href="#">Basic example</a></li>
                            <li><a href="#">Button toolbar</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">Nesting</a></li>
                            <li><a href="#">Vertical variation</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Button dropdowns</li>
                            <li><a href="#">Single button dropdowns</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">Input groups</li>
                            <li><a href="#">Basic example</a></li>
                            <li><a href="#">Sizing</a></li>
                            <li><a href="#">CheckBoxes and radio addons</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Navs</li>
                            <li><a href="#">Tabs</a></li>
                            <li><a href="#">Pills</a></li>
                            <li><a href="#">Justified</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3">
                        <ul>
                            <li class="dropdown-header">Navbar</li>
                            <li><a href="#">Default navbar</a></li>
                            <li><a href="#">Buttons</a></li>
                            <li><a href="#">Text</a></li>
                            <li><a href="#">Non-nav links</a></li>
                            <li><a href="#">Component alignment</a></li>
                            <li><a href="#">Fixed to top</a></li>
                            <li><a href="#">Fixed to bottom</a></li>
                            <li><a href="#">Static top</a></li>
                            <li><a href="#">Inverted navbar</a></li>
                        </ul>
                    </li>
                </ul>

            </li>
        </ul>
        </div>
      </div>
    </nav>

Css代码如下

.menu-large {
  position: static !important;
}
.megamenu{
  padding: 20px 0px;
  width:100%;

}
.megamenu> li > ul {
  padding: 0;
  margin: 0;
}
.megamenu> li > ul > li {
  list-style: none;
}
.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}
.megamenu> li ul > li > a:hover,.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.megamenu.disabled > a,.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
  color: #999999;
}
.megamenu.disabled > a:hover,.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}

我在navbar navbar-default navbar-fixed-top之后添加了一个容器类,但是这个容器不会将更改应用到下拉菜单中.

jsfiddle

请看下面的JsFiddle.

任何帮助将被占用.

解决方法

编号: BOOTPLY EXAMPLE

HTML

<div class="visible-xs menuStaMovil">
 <nav id="menu" class="navbar navbar-default">

                <div class="container-fluid" id="fullNav">

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarBody" aria-expanded="false" id="collapsedNavbarExpand">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <a class="navbar-brand" href="index.html">logo</a>

                    </div>

                    <div class="collapse navbar-collapse menuMovil" id="navbarBody">

                        <ul class="nav navbar-nav">

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                    Tourism 
                                    <span class="caret"> </span>

                                </a>

                                <ul class="dropdown-menu">

                                    <li> <a href="../Pages/tourismHub.html"> <b> Tourism Hub </b> </a> </li>
                                    <li role="separator" class="divider"></li>
                                    <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>
                                    <li> <a href="../Pages/attractions.html"> Attractions </a> </li>
                                    <li> <a href="../Pages/events.html"> Events </a> </li>
                                    <li> <a href="../Pages/history.html"> Town History </a> </li>

                                </ul>

                            </li>

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                                    Residents
                                    <span class="caret"> </span>

                                </a>

                                <ul class="dropdown-menu">

                                    <li> <a href="../Pages/residentsHub.html"> <b> Residents Hub </b> </a> </li>
                                    <li role="separator" class="divider"></li>
                                    <li> <a href="../Pages/events.html"> Events </a> </li>
                                    <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>
                                    <li> <a href="../Pages/history.html"> History </a> </li>

                                </ul>

                            </li>

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                                    Prospective Residents
                                    <span class="caret"> </span>

                                </a>

                                <ul class="dropdown-menu">

                                    <li> <a href="../Pages/prospectiveResidentsHub.html"> <b> Prospective Residents Hub </b> </a> </li>
                                    <li role="separator" class="divider"></li>
                                    <li> <a href="../Pages/realEstate.html"> Real Estate </a> </li>
                                    <li> <a href="../Pages/attractions.html"> Attractions </a> </li>
                                    <li> <a href="../Pages/history.html"> Town History </a> </li>
                                    <li> <a href="../Pages/eatingOut.html"> Eating Out </a> </li>

                                </ul>

                            </li>

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle navOption" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                                    Locations
                                    <span class="caret"> </span>

                                </a>

                                <ul class="dropdown-menu">

                                    <li> <a href="../Pages/locationsHub.html"> <b> Locations Hub </b> </a> </li>
                                    <li role="separator" class="divider"></li>
                                    <li> <a href="../Pages/marina.html"> Marina </a> </li>
                                    <li> <a href="../Pages/highStreet.html"> High Street </a> </li>
                                    <li> <a href="../Pages/parishWharf.html"> Parish Wharf </a> </li>
                                    <li> <a href="../Pages/lakeGrounds.html"> Lake Grounds </a> </li>

                                </ul>

                            </li>

                            <li> <a href="../Pages/map.html" class="navOption"> Map </a> </li>

                        </ul>

                    </div>

                </div>

            </nav>
</div>


  <div id="menuEstatic" class="navbar navbar-default navbar-static-top hidden-xs">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-collapse collapse">
        <div class="container"><ul id="submenu" class="nav navbar-nav">
          <li class="dropdownEstatic dropdown menu-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> INVESTIGAR <span class="glyphicon glyphicon-menu-down pull-right"></span>
          </a>
            <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
             <div class="container">
    <li>
<div class="col-sm-4 col-md-4">


<a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>

    <a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>


<a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>







 </div>




                <div class="col-sm-4 col-md-4 paddingBorder">
                 <ul class="opcionesMenuPrincipal">
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
            </ul>
                </div>
                <div class="col-sm-4 col-md-4 paddingBorder">
                    <ul class="opcionesMenuPrincipal">
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
            </ul>
                </div>
              </li>
    </div>
            </ul></li>
          <li class="dropdownEstatic dropdown menu-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> INVESTIGAR <span class="glyphicon glyphicon-menu-down pull-right"></span>
          </a>
            <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
        <div class="container">
              <li>
                <div class="col-sm-4 col-md-4">

<a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>


<a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>

<a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>
                </div>
                <div class="col-sm-4 col-md-4 paddingBorder">
                  <ul class="opcionesMenuPrincipal">
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
            </ul>

                </div>
                   <div class="col-sm-4 col-md-4 paddingBorder">
                     <ul class="opcionesMenuPrincipal">
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
            </ul>
                </div>
              </li>
    </div>
            </ul></li>
           <li class="dropdownEstatic dropdown menu-large ultimo">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> EXPLORAR <span class="glyphicon glyphicon-menu-down pull-right"></span>
          </a>
            <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
    <div class="container">
              <li class="col-sm-4 col-md-4">
                <a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>

<a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>


<a href="#">
    <div class="contenidoCajaPrincipal">
        <div class="aaaa">
        <div class="imagenMenuPrincipal pull-left">
            <img alt="#" title="#" class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg">

        </div>


        <div class="textoMenuPrincipal pull-right">
            <div class="cajaTextoEstudiar">
            <p class="textoEstudiar">MASTER UNIVERSITARIOS</p>
            </div>
        </div>

</div>
    </div>
</a>


              </li>
              <li class="col-sm-4 col-md-4 paddingBorder">
                   <ul class="opcionesMenuPrincipal">
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
            </ul>
              </li>
              <li class="col-sm-4 col-md-4 paddingBorder">
                 <ul class="opcionesMenuPrincipal">
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Relaciones LAborales y recursos Humanos</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en matemáticas/Grado en ingeniería informática</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
                <li><span class="glyphicon glyphicon-menu-right"></span><a href="#">Grado en Estudios Ingleses</a></li>
            </ul>
              </li>
        </div>
            </ul></li>
        </ul>
      </div>
        </div>
  </div>

CSS

#menuEstatic .navbar-default {
  color: #fff;
  background-color: #ccc6c6;
  border-color: #aca1a2;
}

#menuEstatic .navbar-default .navbar-nav>li>a {
  color: #fff;
}

#menuEstatic .navbar-default .navbar-brand {
  color: #fff;
}

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 0px;
  width: 100%;
}

#dropdownEstatic{
    float: left;
    width: 33.3%;
}

#submenu {
  margin-bottom: 0px!important;
  width: 100%;
}

.dropdownEstatic {
  float: left;
  width: 33.3%;
}
.imagenMenuPrincipal{
      width: 50%;
}
.textoMenuPrincipal{
  background: #d30037;
  min-height: 98px;
  width: 50%;
}

.cajaTextoEstudiar .textoEstudiar{
    width: 50%;
    padding: 9px;
    color: white;
}

.contenidoCajaPrincipal{
    width: 100%;
    min-height: 114px;
}

.contenidoCajaPrincipalSegundo{
    width: 100%;
    padding-top:10px;
    min-height: 114px;
}

.opcionesMenuPrincipal{
    list-style:none;
}

.opcionesMenuPrincipal li .glyphicon-menu-right{
    font-size: 12px;
      color: #d30037;
      padding-right: 8px;
}

.opcionesMenuPrincipal li a,.opcionesMenuPrincipal li a:hover{
  color: black;
  font-weight: bold;
}


.menuMovil .nav>li{
  float: none;
}

JS

$(window).load(function(){
jQuery(document).ready(function(){
    $(".dropdownEstatic").hover(
        function() { $('.dropdown-menu',this).stop().fadeIn("slow");
        },function() { $('.dropdown-menu',this).stop().fadeOut("fast");
    });
});
});

猜你在找的JavaScript相关文章