Foros del Web » Creando para Internet » CSS »

menu horizontal alineado a la derecha

Estas en el tema de menu horizontal alineado a la derecha en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 14/12/2015, 05:08
 
Fecha de Ingreso: mayo-2015
Mensajes: 92
Antigüedad: 8 años, 10 meses
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

Etiquetas: css3
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:27.