Problemas com behavior: url(x.htc) [Menu dropdown]

[Marelo 0]

Galera, estou fazendo um menu horizontal drop-down em CSS puro.

Mas pra variar no IE não funciona. Aí achei esse "hack" que é um javascript que força o IE a interpretar o CSS como realmente deveria...

 

é através do comando

 

behavior: url(csshover.htc);

 

onde o csshover.htc é um arquivo texto com o javascript.

 

Todavia, meu problema é que eu tô querendo usar isso no meu blog, que é no blogger.com e, se não me engano, não posso enviar arquivos pra lá. somente postar os textos e/ou imagens (estou enganado?).

 

Daí pensei em colocar esse arquivo .htc num servidor e acessar remotamente, mas também não funcionou coloquei as permissões dele para 777 (totalmente público) e nada.

 

É isso!...

 

Alguém sabe como solucionar o problema? Se tem como especificar esse .htc "inline" diretamente no código fonte, sem ser um arquivo externo?

 

eis os códigos:

 

CÓDIGO HTML DO MENU:

<div id="menu"> 
   <ul> 
       <li><h2>Links amigos...</h2> 
           <ul> 
               <li><a href="http://.............." title="........." target="_blank">.</a></li>
               <li><a href="http://.............." title="........." target="_blank">.</a></li>
               <li><a href="http://.............." title="........." target="_blank">.</a></li>
               <li><a href="http://.............." title="........." target="_blank">.</a></li> 
           </ul> 
       </li> 
   </ul> 
   <ul> 
       <li><h2>Sempre visito...</h2> 
           <ul> 
               <li><a href="http://.............." title="........." target="_blank">.</a></li>
               <li><a href="http://.............." title="........." target="_blank">.</a></li>
               <li><a href="http://.............." title="........." target="_blank">.</a></li>
               <li><a href="http://.............." title="........." target="_blank">.</a></li>
           </ul> 
       </li> 
   </ul> 
   <ul> 
       <li> 
           <h2>Últimos posts</h2> 
           <ul id="recently"> 
               <bloggerpreviousitems> 
               <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li> 
               </bloggerpreviousitems> 
           </ul> 
       </li> 
   </ul>
<ul>
	<li><h2>Histórico</h2>
		<mainorarchivepage> 
			<ul class="archive-list"> 
				<bloggerarchives> 
					<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li> 
				</bloggerarchives> 
			</ul> 
		</mainorarchivepage>
	</li>
</ul>
</div>

 

CÓDIGO CSS DO MENU:

<style>#menu {width: auto;background: #468;float: left;}#menu ul {list-style: none;margin: 0;padding: 0;width: 13em;float: left;}#menu a, #menu h2 {font: 10px/15px "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;display: block;border-top: 1px solid #f5f5f5;border-left: 1px solid #f5f5f5;border-right: 1px solid #f5f5f5;margin: 0;padding: 2px 10px;}#menu h2 {color: #f5f5f5;background: #468;text-transform:uppercase;font-weight:bold;}#menu a {color: #79b;background: #468;text-decoration: none;}#menu a:hover {color: #fc6;background: #79b;border-left: 10px solid #f5f5f5;font-weight:bold;}#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;}</style><!--[if IE]><style type="text/css" media="screen">body {behavior: url(./csshover.htc);font-size: 100%;}#menu ul li {float: left; width: 100%;}#menu ul li a {height: 1%; font-weight:normal;} #menu a, #menu h2 {font: bold 10px/15px "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;}</style><![endif]-->

CÓDIGO DENTRO DO csshover.htc:

PHP

[*]<attach event="ondocumentready" handler="parseStylesheets" />

[*]<script language="JScript">

[*]/**

[*] * Pseudos - V1.30.050121 - hover & active

[*] * ---------------------------------------------

[*] * Peterned - <a href='http://www.xs4all.nl/~peterned/' target='_blank'>http://www.xs4all.nl/~peterned/</a>

[*] * © 2005 - Peter Nederlof

[*] *

[*] * Credits - Arnoud Berendsen 

[*] *  - Martin Reurings

[*] *  - Robert Hanson

[*] *

[*] * howto: body { behavior:url("csshover.htc"); }

[*] * ---------------------------------------------

[*] */

[*]

[*]var currentSheet, doc = window.document, activators = {

[*] onhover:{on:'onmouseover', off:'onmouseout'},

[*] onactive:{on:'onmousedown', off:'onmouseup'}

[*]}

[*]

[*]function parseStylesheets() {

[*] var sheets = doc.styleSheets, l = sheets.length;

[*] for(var i=0; i<l; i++) 

[*] parseStylesheet(sheets);

[*]}

[*] function parseStylesheet(sheet) {

[*] if(sheet.imports) {

[*] try {

[*] var imports = sheet.imports, l = imports.length;

[*] for(var i=0; i<l; i++) parseStylesheet(sheet.imports);

[*] } catch(securityException){}

[*] }

[*]

[*] try {

[*] var rules = (currentSheet = sheet).rules, l = rules.length;

[*] for(var j=0; j<l; j++) parseCSSRule(rules[j]);

[*] } catch(securityException){}

[*] }

[*]

[*] function parseCSSRule(rule) {

[*] var select = rule.selectorText, style = rule.style.cssText;

[*] if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;

[*]

[*] var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');

[*] var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);

[*] var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];

[*] var affected = select.replace(/:hover.*$/, '');

[*] var elements = getElementsBySelect(affected);

[*]

[*] currentSheet.addRule(newSelect, style);

[*] for(var i=0; i<elements.length; i++)

[*] new HoverElement(elements, className, activators[pseudo]);

[*] }

[*]

[*]function HoverElement(node, className, events) {

[*] if(!node.hovers) node.hovers = {};

[*] if(node.hovers[className]) return;

[*] node.hovers[className] = true;

[*] node.attachEvent(events.on,

[*] function() { node.className += ' ' + className; });

[*] node.attachEvent(events.off,

[*] function() { node.className = 

[*] node.className.replace(new RegExp('\\s+'+className, 'g'),''); });

[*]}

[*]

[*]function getElementsBySelect(rule) {

[*] var parts, nodes = [doc];

[*] parts = rule.split(' ');

[*] for(var i=0; i<parts.length; i++) {

[*] nodes = getSelectedNodes(parts, nodes);

[*] } return nodes;

[*]}

[*] function getSelectedNodes(select, elements) {

[*] var result, node, nodes = [];

[*] var classname = (/\.([a-z0-9_-]+)/i).exec(select);

[*] var identify = (/\#([a-z0-9_-]+)/i).exec(select);

[*] var tagName = select.replace(/(\.|\#|\ :) [a-z0-9_-]+/i, '');

[*] for(var i=0; i<elements.length; i++) {

[*] result = tagName? elements.all.tags(tagName):elements.all; 

[*] for(var j=0; j<result.length; j++) {

[*] node = result[j];

[*] if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +

[*] classname[1] + '\\b').exec(node.className)))) continue;

[*] nodes[nodes.length] = node;

[*] }

[*] } return nodes;

[*] }

[*]</script>

 

Por favor, alguém teria uma luz?

Obrigado!

[pa_bruno 0]

num seria melhor tentar por css naum cara? tem modo d se fazer isso sim... tem posts sobre esse assunto... ;) faz uma busca ae q tem links mostrando como fazer menus drop down http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif