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;