Ответ 1
КОД: Пример BOOTPLY
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");
});
});
});