Crear menus emergente con imágenes

[Marcuus]

Buenas! Soy nuevo en este foro, gracias de antemano por vuestra ayuda. Resulta que estoy intentando crear una página web en codigo HTML con Dreamweaver CS5.5 y quiero integrar un menu desplegable en el cual aparezcan unos logotipos (imagenes) y no letras. Sí pudieseis ayudarme os lo agradecería mil.

Por cierto, no controlo de programación casi de programación, si alguien me contesta en código por favor decidme donde colocarlo jaja es muy urgente.

Muchas gracias de nuevo!

[DrFaust]

Pegale una leída a este tutorial, pero usá imágenes en lugar de texto:

http://www.seoconsultants.com/css/menus/tutorial/

[nedyer]

te dejo un ejemplo ^^

aqui el código HTML , ya como dices que eres novato este código lo colocas dentro del " body "

Código HTML:

<div class="Conntenedor-Menu">
  <ul class="Menu-Web">
    <li id="Btn-1"><a>inicio</a></li>
    <li id="Btn-2"><a>mi web</a></li>
    <li id="Btn-3"><a>sonidos</a></li>
    <li id="Btn-4"><a>videos</a></li>
    <li id="Btn-5"><a>nosotros</a></li>
  </ul>
</div>
 

y aqui el codigo CSS , esto lo colocas dentro del " head " ya que usas dreamweaver solo creas un archivo css lo guardas dentro de tu sitio y luego le das ajuntar archivo css con el dreamweaver esto te lo coloca automáticamente dentro del " head "

Código CSS:

.Conntenedor-Menu {
    padding: 0px;
    height: 50px;
    width: 790px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #09F;
}
ul.Menu-Web {
    margin: 0px;
    padding: 0px;
}
ul.Menu-Web ul {
    margin: 0px;
    padding: 0px;
}
ul.Menu-Web li {
    display: block;
    float: left;
    height: 34px;
    width: 150px;
    margin-left: 5px;
    padding-top: 14px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    list-style-image: none;
    list-style-type: none;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #EBEBEB;
}
ul.Menu-Web a, ul.Menu-Web a:visited {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-transform: capitalize;
    color: #000;
}
ul.Menu-Web a:hover {
    color: #0F0;
    text-decoration: underline;
    cursor: pointer;    
}
ul.Menu-Web a:active {
    color: #F00;
}
#Btn-1 {
    background-image: url(../Imagenes/JPEG/5.jpg);
    background-repeat: no-repeat;
    background-position: 10px center;
}
#Btn-2 {
    background-image: url(../Imagenes/JPEG/4.jpg);
    background-repeat: no-repeat;
    background-position: 10px center;
}
#Btn-3 {
    background-image: url(../Imagenes/JPEG/2.jpg);
    background-repeat: no-repeat;
    background-position: 10px center;
}
#Btn-4 {
    background-image: url(../Imagenes/JPEG/3.jpg);
    background-repeat: no-repeat;
    background-position: 10px center;
}
#Btn-5 {
    background-image: url(../Imagenes/JPEG/1.jpg);
    background-repeat: no-repeat;
    background-position: 10px center;
}
 

una vista de como puede quedar el menú con este código

[Marcuus]

Muchas gracias, habeis sido de gran ayuda!