Menu horizontal varios niveles

[mariadomingo]

Hola, buenos días a todos!

Estoy intentando hacer un menú horizontal con varios niveles de navegación, tal y como lo tengo echo, el contenedor del segundo nivel se alinea debajo de la opción seleccionada y necesitaría que éste ocupara el 100% de la pantalla del navegador, es decir, que se aline sobre la primera opción del primer nivel, no sobre la opción seleccionada...

Así está ahora:
[IMG]file:///Users/hodocom/Desktop/Captura%20de%20pantalla%202015-04-24%20a%20la(s)%2009.30.54.png[/IMG]

Así es como me gustaría:
[IMG]file:///Users/hodocom/Desktop/Captura%20de%20pantalla%202015-04-24%20a%20la(s)%2009.34.18.png[/IMG]

Como véis, tal y como lo tengo, el segundo nivel de atención al cliente empieza justo debajo y hace que se corte... necesitaria que el contenedor del segundo nivel ocupara el 100% de la pantalla y pudiera alinear al centro el contenido de este.

¿Es posible?

Muchas graciass.

[pzin]

Bienvenido al foro.

No podemos acceder a los ficheros de tu ordenador. Sube las imágenes a imgur o sitios similares.

De todas formas, lo que realmente es útil es que publiques el código que tienes. Con una imagen no hacemos demasiado.

[mariadomingo]

perdona, es la primera vez que publico en el foro y no se muy bien como funciona, de echo sale como resuelto y no está resuelto...

[pzin]

Te desmarqué lo de que esté solucionado.

Como te dije, necesitamos ver el código HTML y CSS de ese menú para decirte cómo hacer o qué está mal.

[mariadomingo]

Código HTML:

<div id="block-tb-megamenu-main-menu" class="block block-tb-megamenu">
   <div class="content">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar tb-megamenu-button" type="button">
      <i class="icon-reorder"></i>
      </button>
 
      <!-- contenedor menú -->
      <div class="nav-collapse collapse always-show">
 
         <!-- INICIO lista primer nivel-->
         <ul class="tb-megamenu-nav nav level-0 items-15">
 
            <!-- Nivel 1 -->
            <li class="tb-megamenu-item level-1 mega dropdown">
               <a href="/?q=es/home" class="dropdown-toggle">
               EMPRESA          </a>
               <div class="mega-dropdown-inner">
                  <ul>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/microdent-implant-system-quienes-somos" class="">
                        QUIÉNES SOMOS?          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/content/subhome-corporativo" class="">
                        CORPORATIVO          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/home" class="">
                        COLABORADORES          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/home" class="">
                        NOTÍCIAS          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/como-llegar" class="">
                        COMO LLEGAR          </a>
                     </li>
                  </ul>
               </div>
            </li>
 
            <!-- Nivel 1 -->
            <li class="tb-megamenu-item level-1 mega dropdown">
               <a href="http://microdent.emexs.es/?q=es/microdent-idi" class="dropdown-toggle">
               I+D+I          </a>
               <div class="mega-dropdown-inner">
                  <ul>
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/home" class="">
                        CALIDAD CERTIFICADA          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/home" class="">
                        PROYECTOS CIENTÍFICOS          </a>
                     </li>
                  </ul>
               </div>
            </li>
 
            <!-- Nivel 1 -->
            <li class="tb-megamenu-item level-1 mega dropdown">
               <a href="http://microdent.emexs.es/?q=es/home-productos-microdent" class="dropdown-toggle">
               PRODUCTOS          </a>
               <div class="mega-dropdown-inner">
                  <ul>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega dropdown-submenu">
                        <a href="http://microdent.emexs.es" class="dropdown-toggle">
                        SISTEMA DE IMPLANTES          </a>
                        <div class="mega-dropdown-inner">
                           <ul>
 
                              <!-- Nivel 3 -->
                              <li class="tb-megamenu-item level-3 mega dropdown-submenu">
                                 <a href="/?q=es" class="dropdown-toggle">
                                 GENIUS          </a>
                                 <div class="mega-dropdown-inner">
                                    <ul>
 
                                       <!-- Nivel 4 -->
                                       <li class="tb-megamenu-item level-4 mega">
                                          <a href="http://microdent.emexs.es/?q=es/sistema-implantologico-genius" class="">
                                          IMPLANTES          </a>
                                       </li>
                                       <li class="tb-megamenu-item level-4 mega">
                                          <a href="http://microdent.emexs.es/?q=es/kit-de-cirugia-genius" class="">
                                          KITS QUIRÚRGICOS          </a>
                                       </li>
                                       <li class="tb-megamenu-item level-4 mega">
                                          <a href="http://microdent.emexs.es/?q=es/pilares-de-cicatrizacion-genius" class="">
                                          PILARES DE CICATRIZACIÓN          </a>
                                       </li>
                                    </ul>
                                 </div>
                              </li>
 
                              <!-- Nivel 3 -->
                              <li class="tb-megamenu-item level-3 mega dropdown-submenu">
                                 <a href="/?q=es" class="dropdown-toggle">
                                 SYSTEM          </a>
                                 <div class="mega-dropdown-inner">
                                    <ul>
 
                                       <!-- Nivel 4 -->
                                       <li class="tb-megamenu-item level-4 mega">
                                          <a href="http://microdent.emexs.es/?q=es/sistema-implantologico-system" class="">
                                          IMPLANTES          </a>
                                       </li>
                                       <li class="tb-megamenu-item level-4 mega">
                                          <a href="http://microdent.emexs.es/?q=es/instrumental-de-cirugia-microdent-system" class="">
                                          INSTRUMENTAL DE CIRUGÍA          </a>
                                       </li>
                                       <li class="tb-megamenu-item level-4 mega">
                                          <a href="http://microdent.emexs.es/?q=es/kit-de-cirugia-system" class="">
                                          KITS QUIRÚRGICOS          </a>
                                       </li>
                                    </ul>
                                 </div>
                              </li>
                           </ul>
                        </div>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/sistema-expansion-osea-microdent" class="">
                        EXPANSIÓN ÓSEA          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/" class="">
                        ORTODONCIA          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/regeneracion-osea-biomateriales" class="">
                        REGENERACIÓN ÓSEA          </a>
                     </li>
                  
                  </ul>
               </div>
            </li>
 
            <!-- Nivel 1 -->
            <li class="tb-megamenu-item level-1 mega dropdown">
               <a href="/?q=es/subhome-formaci%C3%B3n" class="dropdown-toggle">
               FORMACIÓN          </a>
               <div class="mega-dropdown-inner">
                  <ul>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/home" class="">
                        COMITÉ CIENTÍFICO          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="/?q=es/subhome-formaci%C3%B3n" class="">
                        CURSOS          </a>
                     </li>
                  </ul>
               </div>
            </li>
 
            <!-- Nivel 1 -->
            <li class="tb-megamenu-item level-1 mega dropdown">
               <a href="http://microdent.emexs.es/?q=es/content/videoteca" class="dropdown-toggle">
               VIDEOTECA          </a>
               <div class="mega-dropdown-inner">
                  <ul>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/videoteca-expansion-osea" class="">
                        EXPANSIÓN ÓSEA          </a>
                     </li>
 
                     <!-- Nivel 2 -->
                     <li class="tb-megamenu-item level-2 mega">
                        <a href="http://microdent.emexs.es/?q=es/content/v%C3%ADdeo-expansi%C3%B3n-osea" class="">
                        FORMACIÓN CONTINUADA          </a>
                     </li>
                  </ul>
               </div>
            </li>
         </ul>
      </div>
   </div>
</div>
 

[mariadomingo]

Código CSS:

/*--------------------------MEGA MENU--------------------------------*/
/*---------------últimes modificaciones 24 abril 2015----------------*/
button.btn.btn-navbar.tb-megamenu-button {
  display: none;
}
 
.region.region-header-menu {
  background: rgb(75, 198, 216);
}
 
#block-tb-megamenu-main-menu{
   width: 100%;
   margin: 110px auto 0 auto;
}
 
/*Primer nivel*/
 
.level-1 {
  float:left;
}
 
.level-1 > a {
  color: white;
  padding: 13px 15px 10px 15px;
}
 
.nav-collapse.collapse.always-show {
    min-width:992px;
    width:992px;
    margin: 0 auto;
}
 
.tb-megamenu-item.mega.dropdown{
    padding:0px 15px;
}
 
li.tb-megamenu-item.level-1.mega.dropdown:hover {
  border-bottom: 5px solid white;
}
 
/*Segundo nivel*/
.tb-megamenu-nav>li:hover>div{
  background:rgb(75, 198, 216);
  display: inline-flex;
  float: left;
}
.mega-dropdown-inner{
  float: left;
  display: inline-flex;
  display:none;
  position: fixed;
  width: 100%;
  margin: 0 auto;
  margin-top: 5px;
}
 
.tb-megamenu-item.level-2.mega a {
  color: rgb(255, 255, 255);
}
 
.level-2{
  float:left;
  padding: 15px 15px;
}
 
 
/*Tercer nivel*/
.mega-dropdown-inner>ul>li:hover > div.mega-dropdown-inner {
  display:block;
  float:left;
}
 
 
.level-3 {
    min-width: 200px;
    margin-top: 10px;
    float: left;
    padding: 15px 0px;
    display: block;
    background: white;  
  }
 
.level-3>.mega-dropdown-inner{
  padding:10px 0;
  display:block;
}
 
.tb-megamenu-item.level-3.mega a {
  color: rgb(75, 198, 216);
}
 
/*Cuarto nivel*/
.level-4 {
  padding: 5px 0px;
  background: white;
}
 
/*OTROS*/
.tb-megamenu-column-inner{
  float:left;
}
 
.tb-megamenu-column-inner > ul{
  margin-left: 5%;
  padding-right: 5%;
  margin: 0 auto;
}
 
.tb-megamenu-column-inner>ul>li>a{
  color:red;
  float:left;
}
 

[fede5426]

Proba poniendo a tu submenu un width de 100%, y un left que quede a la altura del primer ítem del menú..

Para la próxima, vas a ver que en la parte superior de la caja de texto donde escribís tu post, hay un select que dice Highlight, eso es para escribir código con el formato especifico, usalo, se hace mas fácil leerlo..

Saludos