Hola, ya que tu pregunta es demaciada escueta dejame darte una respuesta bastante simple
Usa las etiquetas
[img]tuimagen.png[/img]
Donde tu
tuimagen.png
Vendria a hacer la imagen que deseas usar para tu portada
width=""
Definiras el tamaño real de tu imagen ancho
height=""
Definiras el tamaño real de tu imagen alto
Y lo de menu desplegable basico en css
Empezamos haciendo el código html, que es más sencillo. Simplemente unas etiquetas <ul> y
convenientemente anidadas:
<ul class="menu">
[*]opcion 1
<ul>
[*]una a
[*]una b
[/list]
[*]opcion 2
<ul>
[*]una c
<ul>
[*]otra
[*]mas
[/list]
[*]una d
[/list]
[/list]
Ocultar los submenús
Lo primero que vamos a hacer es ocultar los submenús para no se vean. Para ello, a los <ul> por debajo de los les ponemos un display:none. También hay que quitarles los puntitos que salen con list-style-type:none;
ul.menu
{
list-style:none;
}
ul.menu ul /* Para todos los ul debajo del ul.menu */
{
display:none;
list-style:none;
}
Ahora deberíamos hacerlos visibles cuando el ratón se coloca encima del correspondiente. Para ello usamos li:hover y esto es el motivo por el que no funciona en Internet Explorer, porque no hace caso de los hover salvo que vayan sobre una etiqueta <a>. El estilo CSS sería
/* Esto afecta a todos los ul inmediatamente debajo (el > ) de un li que a su vez esté dentro de un ul.menu */
ul.menu li:hover > ul
{
display:block;
}
En fin, que haciendo todo esto y jugando un poco con las medidas de pixels para que todo cuadre, el estilo CSS queda así
ul.menu
{
list-style:none;
}
ul.menu li
{
position:relative; /* Las coordenadas de los ul inferiores serán relativas al [*] que los contiene */
width:70px;
}
ul.menu ul
{
position:absolute; /* Esta posición es relativa al [*] que contiene a este <ul> */
left:30px; /* Para que no monte sobre el [*] */
top:-1px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
display:block;
}
El resto de los <ul> siguen como hasta ahora. El CSS resultante es lo que teníamos antes más este añadido para tratar distinto los primeros <ul>
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
display:inline;
}
Cualquier cosa me avisas...