Menu de css com javascript em asp

[Marcos Coelho2 2]

Estou tentando fazer uma modificacao no menu.

quero fazer um drop down

estou com um codigo q funciona

esse eh o coigo que funciona

<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}

window.onload=startList;
</script>
<ul id="nav">
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Internet 
            Marketing</a></li> 
        <li><a href="#">Hosting</a></li> 
        <li><a href="#">Domain Names</a></li> 
        <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>

    <li><a href="#">Contact Us</a> 
      <ul> 
        <li><a href="#">United Kingdom</a></li> 
        <li><a href="#">France</a></li> 
        <li><a href="#">USA</a></li> 
        <li><a href="#">Australia</a></li> 
      </ul> 
    </li> 
  </ul>

e agora o codigo que eu estou tentando fazer funcionar o drop down

<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}

window.onload=startList;
</script>
<div id="nav">

  <h1 class="style26">Menu</h1>
  <ul id="nav">
    <li class="style26"><a href="http://www.comerciando.com.br/">Home </a></li>
    
    <li><a href="http://www.comerciando.com.br/anuncie.asp" class="style26">Anuncie Grátis </a>
	<ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
	</li>
    <li><a href="http://www.comerciando.com.br/anuncie.asp" class="style26">Anuncie em Destaque </a></li>
    <li><a href="http://www.fipe.com.br/web/index.asp" class="style26" target="_blank" >Tabela Fipe </a></li>
    <li><a href="http://www.comerciando.com.br/formulario.asp" class="style26">Fale Conosco </a></li>
  </ul>
  <h1 class="style26">Classificados</h1>
  <ul>
    <li class="style26"><a href="http://www.comerciando.com.br/carros.asp">Carros </a></li>
    <li><a href="http://www.comerciando.com.br/motos.asp" class="style26">Motos </a></li>
    <li><a href="http://www.comerciando.com.br/imoveis.asp" class="style26">Imóveis </a></li>
    <li><a href="http://www.comerciando.com.br/imoveis.asp" class="style26">Outros </a></li>
  </ul>
  <h1 class="style26">Salão de Festas</h1>
  <ul>
    <li class="style26"><a href="http://www.comerciando.com.br/brizza/">Brizza </a></li>
    <li><a href="http://www.comerciando.com.br/castro/" class="style26">Castro </a></li>
    <li><a href="http://www.comerciando.com.br/sitiodoalan/" class="style26">Sitio do Alan </a></li>
  </ul>
  </ul>
  </ul>
</div>

tem tmb a parte do css mas axo que nao influencia muito no drop down mas mesmo assim irei postar aki

o css do menu que está funcionando

 <style type="text/css"> 
  ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}
	ul li {
	position: relative;
	}
	li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
	

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}
	
	</style>

e agora o css do menu que estou tentando fazer funcionar.

<style type="text/css">
<!--
html, body{
 
 font-weight: normal;
 height: 100%;
 margin: 0;
 padding: 0;
}

* {margin: 0; padding: 0;}

a{
 color: #33cc00; 
 text-decoration: none;}
 
a:hover{
 color: #000000;
 text-decoration: underline;}

#middle h1{ 
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 color: #000000;
 background-color: #339900;
 border-bottom: 3px #336633 solid;
}

p{
 font-size: 12px;
 color: #ffffff;
 background-color: transparent;
 padding: 10px;
}

#banner{
background: #003300 url(banner.jpg) top center  no-repeat;
text-align: center;
width: 100%;
margin: auto;
height: 150px;
}
/* Navigation 1 Stuff */
/*----------------------------------*/
#nav{
	background-color: #000000;
	width: 170px;
	float: center;
	left: 168px;
}

#nav a{
 color: #000000;
 font-size: 12px;
 background-color: #E8E8E6;
 display: block;
 padding: 3px;
 text-align: center;
 text-decoration: none;
 border: 1px #999999 solid;
 font-weight: bold;	
}

#nav a:hover{
 background-color: #CCCCCC;
 display: block;
 text-decoration: underline;
}

#nav ul{
list-style: none;
line-height: 14px;}

#nav h1 {
 color: #000000;
 font-weight: bold;
 font-size: 12px;
 text-align: center;
 padding: 2px;
 background-color: #FF9900;
 padding: 0px;
 margin: 0px;
}

/* ------------------------------------------------*/
#middle{
 background-color: #202020;
 width: 80%;
 float: right;
 border: 3px #336600 solid;
 }
}

#middle ul{
 padding: 25px;}

#copyright{
float: right;
font-weight: normal;
background-color: #222222;
width: 80%;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
border: 3px #339900 solid;
font-size: 12px;}
a {color: #343636;}
a:hover {color: #343636;}
-->
}
	ul li {
	position: relative;
	}
	ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
		li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
	
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { 
	display: block; }
</style>
<style type="text/css">
<!--
.style23 {font-size: 12px}
.style25 {font-size: 12px; color: #343636; }
.style26 {font-family: Verdana, Arial, Helvetica, sans-serif}

-->
</style>
<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}

window.onload=startList;
</script>

ainda esta com alguns erros que irei corrigir

qualquer duvida pode perguntar

[xanburzum 169]

ele gera algum erro ...

dá uma pesquisada no lab. de script, k existem varios exemplos de DROP DOWN

[Ted k' 126]

onde entra o ASP nisso?

 

Creio que seria melhor postar em javascript, se precisar redirecionar avisa!

[Marcos Coelho2 2]

realmente eh melhor posta em javascript pois a parte de asp nao influenciou em nada

[Ted k' 126]

Não tem problema amigo :)

 

Movido de ASP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript / DHTML

[William Bruno 1501]

Um dos erros, é que você duplicou o id:

<div id="nav">

  <h1 class="style26">Menu</h1>
  <ul id="nav">

não pode.. e isso pode estar confundindo o script js.

 

Organizando o teu css para algo legível:

<style type="text/css">
* {margin: 0; padding: 0;}
html, body{
	font-weight: normal;
	height: 100%;
	margin: 0;
	padding: 0;
}
a{
	color: #33cc00; 
	text-decoration: none;
}
a:hover{
	color: #000000;
	text-decoration: underline;
}

#middle h1{ 
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #000000;
	background-color: #339900;
	border-bottom: 3px #336633 solid;
}
p{
	font-size: 12px;
	color: #ffffff;
	background-color: transparent;
	padding: 10px;
}
#banner{
	background: #003300 url(banner.jpg) top center  no-repeat;
	text-align: center;
	width: 100%;
	margin: auto;
	height: 150px;
}
/* Navigation 1 Stuff */
/*----------------------------------*/
#nav{
	background-color: #000000;
	width: 170px;
	float: center;
	left: 168px;
}
#nav a{
	color: #000000;
	font-size: 12px;
	background-color: #E8E8E6;
	display: block;
	padding: 3px;
	text-align: center;
	text-decoration: none;
	border: 1px #999999 solid;
	font-weight: bold;     
}
#nav a:hover{
	background-color: #CCCCCC;
	display: block;
	text-decoration: underline;
}
#nav ul{
	list-style: none;
	line-height: 14px;
}
#nav h1 {
	color: #000000;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	padding: 2px;
	background-color: #FF9900;
	padding: 0px;
	margin: 0px;
}
/* ------------------------------------------------*/
#middle{
	background-color: #202020;
	width: 80%;
	float: right;
	border: 3px #336600 solid;
}
#middle ul{
	padding: 25px;
}
#copyright{
	float: right;
	font-weight: normal;
	background-color: #222222;
	width: 80%;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 3px #339900 solid;
	font-size: 12px;
}
a {color: #343636;}
a:hover {color: #343636;}
#nav ul li {
	position: relative;
}
#nav ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
}
#nav li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { 
display: block; }

.style23 {font-size: 12px}
.style25 {font-size: 12px; color: #343636; }
.style26 {font-family: Verdana, Arial, Helvetica, sans-serif}

</style>

existiam erros de sintaxe.

Qndo for assim, valide o documento:

http://jigsaw.w3.org/css-validator/

e

http://validator.w3.org/

[Henrique Barcelos 290]

Veja:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/340960-menu-drop-down-fluido-3-niveis-imagens/