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;