Drop Down Menu CSS

[_SirO_]

Boa noite, sou nova nestas andanças de programação web.

Resolvi fazer uma página com uso de css, mas não me estou a safar bem no menu que pretendo fazer, dropdown.

O que eu pretendia era corrigir, um problema, fazer que quando clicasse no sitio principal e depois aparecessem os secundários, nao houvesse nenhuma quebra do fundo.

Já li alguns tutoriais, e fiz um search no forum, mas nao encontrei nada que achasse que me pudesse ajudar.

Percebi que existem bastantes problemas com o css no IE, seria entao melhor esquecer a ideia do menu em css e fazê-lo em javascript (não percebo nada....ainda menos que CSS  😛 )?

A pagina em questão é: http://www.leirifotec.com/VMT/index.php

CSS: http://www.leirifotec.com/VMT/css/style.css

/* Menu */

#menu_fundo {

background-image:url(../imagens/menu/fundo.gif);

background-repeat:repeat-x;

width:800px;

height:32px;

}

#menu_canto_esq {

background-image:url(../imagens/menu/canto_esq.gif);

width:800px;

height:32px;

background-position:left;

background-repeat:no-repeat;

}

#menu_canto_dir {

background-image:url(../imagens/menu/canto_dir.gif);

width:800px;

height:32px;

background-position:right;

background-repeat:no-repeat;

}

#menu {

width: 600px;

float: left;

height:32px;

text-align:center;

}

#menu ul {

list-style: none;

margin: 0;

padding: 0;

width: 120px;

float: left;

}

#menu ul:hover {

background-image:url(../imagens/menu/mouseover.gif);

width:120px;

background-position:left;

background-repeat:no-repeat;;

}

#menu_sub {

background-image:url(../imagens/menu/mouse_sub.gif);

width:120px;

background-position:left;

background-repeat:repeat-y;

}

#menu_sub_fundo {

background-image:url(../imagens/menu/mouse_sub_fun.gif);

width:120px;

height:4px;

background-position:bottom;

background-repeat:no-repeat;

}

#menu h2 {

font: bold 12px verdana;

color:#6E6E6E;

padding:8px 8px;

display:block;

margin:0;

}

#menu a {

font: bold 11px verdana;

color:#6E6E6E;

text-decoration:none;

text-align:left;

display:block;

margin: 5px;

padding:3px 3px;

}

#menu a:hover {

color:#B3C34D;

}

#menu li {position: relative;}

#menu ul ul {

position: absolute;

z-index: 500;

}

#menu ul ul ul {

position: absolute;

top: 0;

left: 100%;

}

div#menu ul ul,

div#menu ul li:hover ul ul,

div#menu ul ul li:hover ul ul

{display: none;}

div#menu ul li:hover ul,

div#menu ul ul li:hover ul,

div#menu ul ul ul li:hover ul

{display: block;}

-------------------------------------

Obrigado

[UnKnowN]

Bem a melhor solução será talvez iniciares-te em JavaScript, ou se não quiseres, e visto que de CSS percebes o suficiente para fazer uma coisinha jeitosa, eu arranjo-te 1 script em javascript já com o menu DropDown e dps é só fazeres as tuas "propriedades", tamanho da letra, cor, etc 😛

Dps diz qq coisa 🙂