Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/12/2015, 05:08
lamenenchu
 
Fecha de Ingreso: mayo-2015
Mensajes: 92
Antigüedad: 9 años
Puntos: 1
menu horizontal alineado a la derecha

Hola. Llevo rato dando vueltas al diseño de mi menú, pero es la pescadilla que muerde la cola. Cuando consigo una cosa, se destroza otra.

Alguien puede revisar este código y decirme cuál es mi fallo?
El tema es que tengo un menu dentro de una cabecera. (div logo + div menu) Y al hacer hover, se despliegan más opciones horizontalmente, pero ese menú empieza a mitad de cabecera (ya que está dentro del div menu), pero lo que quiero es que el menú empiece a mitad, al lado del logo, y el submenu abarque el 100%.

Código HTML:
 <div class="contenedor">
        <div class="logo"><img /> </div>
<div class="menu">
<ul>
  <li class="nivel1"><a href="#" class="nivel1">PRODUCTS</a>

	<ul class="uno">
		<li><a href="#">PPCA</a></li>
		<li><a href="#">Disc</a></li>
		<li><a href="Bearing.aspx">Bearing</a></li>
		<li><a href="#">Rigid flywheel</a></li>
		<li><a href="#">Dual Mass flywheel</a></li>
		<li><a href="#">CSC</a></li>
		<li><a href="#">CMC</a></li>
		<li><a href="#">CRC</a></li>
		<li><a href="#">DCFT</a></li>
	</ul>

  </li>
  <li class="nivel1">
  <a href="#" class="nivel1">ACTIONS</a>

	<ul class="dos">
		<li><a href="contentProduct.aspx">Finished product </a></li>
		<li><a href="#">Linked vehicles</a></li>
		<li><a href="#">Technical cross list</a></li>
		
	</ul>

</li>
  <li class="nivel1"><a href="#" class="nivel1">EXTRACTION</a>

	<ul class="tres">
		<li><a href="#"></a></li>
		<li><a href="#">Export</a></li>
		<li><a href="#">Import</a></li>
		
	</ul>

</li>
  <li class="nivel1"><a href="#" class="nivel1">HELP</a>

	<ul class="cuatro">
		<li><a href="#"></a></li>
		<li><a href="#">Presentation database</a></li>
		<li><a href="#">User manual</a></li>
		
	</ul>

</li>

</ul>
</div> </div> 

Código:
.menu {
    text-align: center;
    font-size: 1em;
    width: 100%;
    margin: 2em auto;
    position: relative;
    font-family: monospace, sans-serif;
}

.menu ul {
    list-style-type: none;
}

.menu ul li.nivel1 {
    float: left;
    width: 10%;
    margin-right: 2px;
    position: relative;
    
}

.menu ul li {
    float: left;
}

.menu ul li a {
    display: block;
    text-decoration: none;
    color: white;
    background-color: #375c72;
    width: 100%;
    padding: 8px;
    position: relative;
}

.menu ul li a:hover,
.menu ul li:hover a.nivel1 {
    background-color: #52c969;
    color: white;
    position: relative;
   
}

.menu ul li a.nivel1 {
    display: block!important;
    display: none;
    
}

.menu ul li ul {
    display: none;
   
}

.menu ul li a:hover ul,
.menu ul li:hover ul {
    display: block;
    position: absolute;
    width: 816px;
    border: solid 1px #fff;
    border-top: none;
    background-color: #52c969;
  
}

.menu ul li ul li a {
    width: 100%;
    padding: 0.5em;
    margin-left: 1em;
    border: none;
    background-color: #52c969;
   
}

.menu ul li ul li a:hover {
    position: relative;
    text-decoration: none;
    border-bottom: none;
    
    
}
.menu ul li ul li a:active{
    box-shadow: 5px 5px 5px inset;
    color: red;
}


table.falsa {
    border-collapse: collapse;
    border: 0px;
    float: left;
    position: relative;
}

ul.uno {
    left: -0px;
}

ul.dos {
    left: -164px;
}

ul.tres {
    left: -328px;
}

ul.cuatro {
    left: -492px;
}
.contenedor {
background-image: url('header-bg.jpg');
display: inline-block;
width: 100%;

}
.logo img {
  margin: 1em;
  float: left;
  background-image: url('Images/logo.png');
  width: 260px;
  height: 130px;

Última edición por lamenenchu; 14/12/2015 a las 05:13