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;


