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;
 

