javascript - Bootstrap3 Mega 菜单更改下拉宽度

Question

我想知道如何更改 bootstrap mega 菜单下拉大小以适合 bootstrap 容器宽度。

我在下面附上了一张图片，以便更好地理解我想做什么。

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-default navbar-fixed-top 之后添加了一个容器类，但是这个容器没有将更改应用到下拉菜单。

jsfiddle

请看下面的 JsFiddle。

任何帮助都会被挪用。

Answer 1

代码: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");
        });
    });
});