Peguei esse modelo de barra de menu com submenu na internet e gostaria de editar e adicionar conteudo a essa página, mas quando adiciono o javascript para.
Não sei como fazer para adicionar imagens outros códigos javascripts sem fazer com que o menu deixe de funcionar, por favor me ajudem.
Grande abraço a todos e obrigado pela paciência.
Segue o código html:
Testando o menu drop-down
body { font: normal 62.5% verdana; }
ul.menubar{
margin: 0px;
padding: 0px;
background-color: #FFFFFF; /* IE6 Bug */
font-size: 100%;
}
ul.menubar .submenu{
margin: 0px;
padding: 0px;
list-style: none;
background-color: #FFFFFF;
border: 1px solid #ccc;
float:left;
}
ul.menubar ul.menu{
display: none;
position: absolute;
margin: 0px;
}
ul.menubar a{
padding: 5px;
display:block;
text-decoration: none;
color: #777;
padding: 5px;
}
ul.menu, ul.menu ul{
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
width: 150px; /* Width of Menu Items */
background-color: #FFFFFF; /* IE6 Bug */
}
ul.menu li{
position: relative;
list-style: none;
border: 0px;
}
ul.menu li a{
display: block;
text-decoration: none;
border: 1px solid #ccc;
border-bottom: 0px;
color: #777;
padding: 5px 10px 5px 5px;
}
ul.menu li sup{
font-weight:bold;
font-size:7px;
color: red;
}
/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* html ul.menu li a { height: 1%; }
/* End */
ul.menu ul{
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0px;
}
ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */
ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; }
ul.menu li a:hover { color: #E2144A; }
Uma dica seria não deixar CSS, JavaScript e o html do menu tudo misturado no mesmo arquivo. Separe cada um em seu lugar.
O css em um aquivo .css
O javascript em um arquivo .js
E o menu em um outros do tipo .html ou qualquer outra linguagem q esteja usando.
(desta forma fica mais rápido, facil e bonito vc inserir o seu menu em todas as suas telas)
Depois, verifique se os javascripts que vc está tentando adicionar na sua tela (misturado ao menu) possui nomes de variaveis iguais pois uma delas pode estar anulando ou sobrescrevendo os valores das outras.
jumpjack
Desculpa a pergunta ingenua, mas sou café com leite. Como eu vou fazer a associação desses arquivos, tanto o .css e o .js na página html ? Você algum tutorial eu site que possa me ajudar. Confesso que estou buscando, mas estou ficando um pouco confuso com os resultados.