mismo problema de estructura menu desplegable con img.

Saludos, con anterioridad expuse (muy mal por cierto) un inconveniente con la realizacion de un menu desplegable. Mi peticion de ayuda es para ver como solvento el detalle de integrar la img del logotipo al menu tal cual se ve en la imagen que les anexo y luego les anexo las estructuras del menu que esta funcionando que debe cambiarse. Gracias y espero no importunar demasiado.

[img]http://l4c.me/fotos/alejandrocoello/menu-desplegable[/img]
codigo html:

<div style="menu1">
<ul id="menu1">
<li><a href="#">Inicio</a></li>
<li><a href="#">item1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
</ul>
</li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li class="last"><a href=#">item5</a></li>
</ul>
</div>

y el codigo CCS:
/* menu1 */
#menu1 {
overflow:hidden;
font-size: 16px;
margin: 0px;
padding-top: 20px;
height: 50px;
width: 1160px;
background:url(img/elementos/menu_1.gif);
}
#menu1 li {
position:static;
float:left;
display:inline-block;
}
#menu1 li a {
padding: 2px 20px 2px 20px;
border: none;
font-size: 16px;
font-weight:200;
color:#FFF;
text-decoration: none;
text-transform:uppercase;
text-align:center;
display: block;
}

#menu1 li: a:hover {
background-color: #341e07;
}
#menu1 ul {
position:absolute;
z-index: 99999;
display: none;
list-style-type:none;
list-style: none;
margin: 2 0;
padding: 0;
width: 200px;
}
#menu1 ul li a {
background-color: #c98c4b;
width: 150px;
border-right-style: none;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #341e07;
background: rgb(55, 33, 11);
background: -moz-linear-gradient(90deg, rgb(55, 33, 11) 30%, rgb(104, 76, 3 70%);
background: -webkit-linear-gradient(90deg, rgb(55, 33, 11) 30%, rgb(104, 76, 3 70%);
background: -o-linear-gradient(90deg, rgb(55, 33, 11) 30%, rgb(104, 76, 3 70%);
background: -ms-linear-gradient(90deg, rgb(55, 33, 11) 30%, rgb(104, 76, 3 70%);
background: linear-gradient(180deg, rgb(55, 33, 11) 30%, rgb(104, 76, 3 70%);
}

#menu1 ul li a:hover {
background-color: #fff;
}

#menu1 li:hover > ul{
display:block;
}


Nota: espero que se vea la imagen.

Y porque pones la imagen como un background? No es mejor que la pongas en un lateral??

Un saludo,
David
soluciones web