Dropdown menu horizontal - melhor maneira

[pamellass 0]

Olá!

 

Estou desenvolvendo um site que terá um menú dropdown horizontal. Pesquisei bastante na Net e essa foi a única maneira que consegui fazê-lo funcionar proximo ao jeito que eu queria:

 

HTML:

 

<ul class="navmain">
<li><a href="#">Home</a></li>
<li><a href="#">Sobre o CEDM</a>
	<ul>
		<li><a href="#">Filosofia</a></li>
		<li><a href="#">Equipe</a></li>
	</ul>
</li>
<li><a href="#">Clínica</a>
	<ul>
		<li><a href="#">Experiência</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Avaliação</a></li>
		<li><a href="#">Tratamento</a></li>
	</ul>
</li>
<li><a href="#">Cursos</a>
	<ul>
		<li><a href="#">Experiência</a></li>
		<li><a class="dor_main" href="#">Formação Continuada em Dor</a></li>
		<li><a href="#">Cursos</a></li>
		<li><a href="#">Agenda</a></li>
		<li><a href="#">Inscrições</a></li>
		<li><a href="#">Ex-alunos</a></li>
	</ul>
</li>

etc...

.

.

.

.

 

 

CSS:

 

<style type="text/css">

.navmain {
margin:0;
padding:0;
list-style: none;
width:960px;
height:35px;
font-size:13px;
background:url(images/nav_fundo.jpg);
}

.navmain ul {
margin:0;
padding:0;
list-style-type:none;
}

.navmain li {
margin:0;
padding:0;
width: 120px;
float:left;

}

.navmain li ul {
position: absolute;
width: 120px;
left: -999em;
color:rgb(255,255,255);
background-color:#21245b;
}

.navmain li:hover ul {
left: auto;
}

.navmain a {
display: block;
}

.navmain li a {
color:#21245b;
}

.navmain li ul a {
color:#ffffff;
}

.navmain a:link {
display:block;
font: 0.95em Arial, Helvetica, sans-serif;
text-align:center;
padding:10px 8px 10px 8px;
text-decoration:none;
}

.navmain a:hover {
background:url(images/nav_fundob.jpg);
color:#FFFFFF;
}


sfHover = function() {
var sfEls = document.getElementById("navmain").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
	sfEls[i].onmouseover=function() {
		this.className+=" sfhover";
	}
	sfEls[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


</style>

 

 

Print Screen do resultado:

Clique aqui

 

 

Gostaria de saber se há um jeito melhor de fazer isso acontecer!

 

E se há como fazer com que o menú principal dos submenus que descem, fique azul escuro tb quando eu descer com o mouse para os submenus abaixo....Assim!

 

 

muito obrigada desde já a quem puder comentar!

[Diéssica 140]

Gostaria de saber se há um jeito melhor de fazer isso acontecer!

 

Do jeito que tá, ficou bom. O CSS e o Javascript.

Só se você quiser algum efeito e tal.. Mas assim fica bem leve e simples, vai combinar mais.

 

Esse fundo aqui

background:url(images/nav_fundob.jpg);

é qual?

[pamellass 0]

É o fundo dos botões em a:hover, o azul escuro!

 

 

Mas quando eu fui validá-lo no w3c, ele aponta alguns erros:

 

Clique aqui

[Giovani 104]

Não sei se você viu: Repente CSS - [Menus]

[pamellass 0]

Não sei se você viu: Repente CSS - [Menus]

 

 

 

Não vi não, vou dar uma lida, muito obrigada.

Mas pelo que vi, não tem nenhum exemplo como o meu né? Mas vou dar uma olhada, ver se ajuda... ;)

[Diéssica 140]

Mas quando eu fui validá-lo no w3c, ele aponta alguns erros:

 

Clique aqui

 

Você está validando apenas o menu aí, né?

 

Use o http://validator.w3.org/, se você tivesse validado nele, ele teria te avisado sobre isso. E bem assim:

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

 

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

 

Ou seja...

Você colocou funções JAVASCRIPT dentro de <style>.

 

<style> é apenas para estilização CSS. Para Javascript, se usa <script>.

 

Retire este código de dentro de <style></style>

sfHover = function() {
       var sfEls = document.getElementById("navmain").getElementsByTagName("LI");
       for (var i=0; i<sfEls.length; i++) {
               sfEls[i].onmouseover=function() {
                       this.className+=" sfhover";
               }
               sfEls[i].onmouseout=function() {
                       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
               }
       }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

 

E coloque dentro de <script></script> que são as tags corretas para pôr funções Javascript.

 

Porém, o certo é você linkar o CSS e o Javascript na página, colocando eles em arquivos separados. Vai ficar mais leve, vai ajudar na organização do seu site e também vai facilitar no gerenciamento.

 

Lembrando que você não precisa colocar dentro de <style> nem <script>...

 

Pega os códigos de dentro da tag style, coloca eles num arquivo .css e linka na página. Assim:

<link href="ARQUIVO.css" rel="stylesheet" type="text/css" />

 

Pega os códigos Javascript e coloca eles num arquivo .js e linka na página. Assim:

<script type="text/javascript" src="ARQUIVO.js"></script>

 

Depois é só trocar os nomes dos arquivos!

 

[]s,

Diéssica Gurskas

[pamellass 0]

Diéssica,

 

 

eu to sabendo disso de colocar o CSS e Javascript em uma folha externa, mas enquanto estou desenvolvendo o site, estou deixando eles no mesmo arquivo para não ter de ficar salvando cada um em cada visualização q eu fizer no browser... ;)

 

 

Realmente, não sabia que o Javascript ficava dentro de outra tag, valeu!

 

 

Só uma dúvida mais, qual a melhor ordem para colocar o <script> e o <style>? Qual é melhor colocar antes?