Search the Community

Olá amigos. espero que estejam todos bem. Estou tentando criar uma galeria de imagens e colocar nestas um botão para votação (Gosto como no Facebook). Já consegui criar a galeria e colocar o Like nas imagens, mas acontece que quando as imagens passam para a linha de baixo o botão Like não acompanha a imagem. Junto uma imagem para exemplificar como está e como deveria ser. O CSS está assim h1 { text-align: center; color: forestgreen; margin: 30px 0 50px; } .container h2 { text-align: center; color: rgb(8, 8, 8); margin: 30px 0 50px; } .gallery { margin: 10px 50px; padding-right: 0px; padding-left: 0px; } .gallery img { width: 230px; padding: 0px; opacity: 0.5; filter: grayscale(10%); transition: 1s; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; margin-right: 0px; border: 2px solid #ccc; border-radius: 10%; } .ilike { display: grid; border-radius: 10%; box-sizing: border-box; text-align: left; padding: 15px; font-size: 20px; vertical-align: top; position: absolute; z-index: 1000; margin-top: 10px; margin-left: 10px; overflow: hidden; color: white; } O código da página da galeria de fotos está assim: <div class="gallery"> <?php $sql = "SELECT * FROM tbl_gallery where aid=$aid"; $num_rows = mysqli_num_rows(mysqli_query($conectar, $sql)); $result = mysqli_query($conectar, $sql); while ($row = mysqli_fetch_array($result)) { $gimage = $row['gimages']; $fotoid = $row['gid']; $likes = $row['likes']; ?> <a href="páginapararegistarovoto" ?> "><i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a> <i class="inum" > <?php echo "Foto " . $fotoid; ?> </i> <?php echo "<a href='../fotos/$gimage' data-lightbox='mygallery' data-title='Foto n.º: $fotoid'><img src='../thumbnails/$gimage' class='pic'></a>"; } ?> </div>

Boa tarde pessoal. Estou criando uma página. Editando na verdade. Gostaria de saber se é possível deixar o texto retinho do lado direito igual está ao lado esquerdo. Existe alguma forma para fazer isso? Agradeço pela ajuda.

Olá, tenho uma dúvida e espero que você ou alguém que veja este post possa me ajudar. Bom criei um app com flash cc6 usando Action Script 3. vários frames com vários mc tudo funcionando em um dos frame tenho um scrollpane que carrega um movie clip e o que tiver dentro dele normal, super simples, minha dúvida é como importar um texto do word com toda a sua formatação , importar um txt para um campo TLF é fácil mas a formatação é um problema. Tem que ser do word porque minha aplicação tem muitos texto e se algum texto precisar de alteração somente eu tenho que fazer porque ninguém no meu trabalho sabe usar o flash. Alguém pode me ajudar?

Minha dúvida é tenho um artigo no site X e quero transferir para o site Y como fazer isso sem que o google me penalize por copia?

Olá pessoal. Estava precisando de alguma tecnologia para fazer o seguinte: Vamos supor que eu tenha um cadastro de pessoas e tenha um modelo de um documento. Precisava que meu algoritmo/tecnologia pegasse esse texto, e que substituísse em certas posições por dados coletados do cadastro vinculado, isso tudo em um editor WYSIWYG. Alguém conhece algum jeito de fazer isso? Javascript/Ajax ou outra linguagem?

Olá amigos, Estou precisando de uma ajuda... Preciso mostrar apenas um texto especifico com 10 caracteres antes dele, e 10 caracteres depois dele... Até o momento, consegui tirar o texto especifico de dentro da string... Como vocês podem ver: Resultado: arroz Só que eu quero que o resultado seja mais ou menos assim: ...no mundo, é o arroz, sendo o ter... Alguém pode me ajudar?

Olá, estou desenvolvendo um site onde não posso editar o HTML dos menus, então estou trabalhando de uma forma mais "gambiarra". O Menu possui botões que são palavras "únicas" e outros botões onde há "duas linhas de palavras". Porém não consigo centralizar verticalmente os dois. Assim, por exemplo ------=====------- HTML (Não posso alterar nada, apenas acrescentar mais botões) <nav class="menu_component" id="component_37548"> <menu class="dropdown"> <li id="menu_item_39037" class="sub"> <a alt="O SIENPRO" title="" target="" class="empty-href"> O SIENPRO </a> <menu class="submenu"> <li id="menu_item_41614" class=""> <a alt="SOBRE" title="" target="" class="" href="/p/21374-sobre-o-sienpro"> SOBRE </a> </li> <li id="menu_item_39038" class=""> <a alt="COMIT&Ecirc;" title="" target="" class="" href="/p/23834-comite-2018"> COMIT&Ecirc; </a> </li> </menu> </li> <li id="menu_item_41615" class=""> <a alt="TEMA" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#tema"> TEMA </a> </li> <li id="menu_item_41616" class=""> <a alt="PRINCIPAIS DATAS" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#datas"> PRINCIPAIS DATAS </a> </li> <li id="menu_item_39040" class="sub"> <a alt="EDI&Ccedil;&Otilde;ES SIENPRO" title="" target="" class="empty-href"> EDI&Ccedil;&Otilde;ES SIENPRO </a> <menu class="submenu"> <li id="menu_item_41593" class=""> <a alt="I SIENPRO - 2017" title="" target="" class="" href="/p/23811-i-sienpro-2017"> I SIENPRO - 2017 </a> </li> <li id="menu_item_41605" class=""> <a alt="II SIENPRO - 2018" title="" target="" class="" href="/p/23814-ii-sienpro-2018"> II SIENPRO - 2018 </a> </li> </menu> </li> <li id="menu_item_39041" class=""> <a alt="CONTATO" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#contato"> CONTATO </a> </li> <li id="menu_item_41617" class="sub"> <a alt="ARTIGOS" title="" target="" class="empty-href"> ARTIGOS </a> <menu class="submenu"> <li id="menu_item_41618" class=""> <a alt="REGRAS PARA SUBMISS&Atilde;O" title="" target="" class="empty-href"> REGRAS PARA SUBMISS&Atilde;O </a> </li> <li id="menu_item_41619" class=""> CSS: .menu_component *{ margin: 0; padding: 0; } .menu_component .dropdown{ width: 100%; height: 67px; background-color: #222; } .dropdown li{ list-style: none; position: relative; float: left; width: 150px; text-align: center; } .dropdown li li{ float: none; width: 200px; text-align: left; } .dropdown li a{ padding: 15px !important; display: block; text-decoration: none; background-color: #222; font-size: 18px; color: #fff; height: 37px; } .dropdown .submenu { position: absolute; z-index: 1000; display: none; } .dropdown li:hover .submenu{ display: block; } .dropdown a:hover{ background-color: #f0f0f0; color: #000; } Link do site: https://sienpro.catalao.ufg.br/ Menu como está: Como eu gostaria que ficasse:

Eu tô desenvolvendo uma página HTML e CSS para um trabalho da escola. Eu não tenho muita noção, tô pegando alguns códigos prontos. Eu criei uma div e estilizei o texto dela com CSS, deu certo. Criei uma outra div dentro dessa div e tentei estilizar o texto dessa segunda div, mas não funciona. Preciso de ajuda!!! Já tentei de tudo!!

Restaurei meu Windows 10 para as configurações de fábrica e após isso, o Photoshop CS6 portable está com o seguinte problema: Ao digitar, o texto não aparece... mas quando o arrasto ele aparece. Para editar é a mesma coisa. Alguém sabe o que pode ser? Segue vídeo...

Eu Inseri uma Div <div class="curiosidades"> </div> pretendo criar uma listas com vários textos para ser carregado na DIV ao ser carregado a página ser puxado um dos textos da lista pre definida, também gostaria de inserir na div um botão de recarregar para ser possível mostrar outro item sem precisar recarregar a página!!! se alguém souber me explicar como faço ou puderem me mandar o link se esse assunto ja tiver sido explicado em outro post agradeço!!!

To com essa duvida.

Olá! De antemão falo que não entendo nada de programação. Sou escritor e tenho alguns materiais para criar jogos de texto, como lifeline. Gostaria de saber em qual linguagem posso aprender e criar meus jogos? Qual seria mais fácil? Existe alguma ferramenta para facilitar a criação de tais jogos? Obrigado!

Sigo o seguinte passo a passo para o efeito de pedras de diamantes contornando as letras: 1° Inserir texto desejado 2° Clicar sobre a miniatura da camada do texto pressionando CTRL 3° Barra de Ferramentas --> Selecionar --> Transformar --> Expansão (10) 4° Criar nova camada --> abrir a aba “Demarcadores” --> Criar Demarcador de Trabalho...(0,5 a 10) 5° Ferramenta Pincel (alterar 1° plano para cor Branco) --> Traçar Demarcador com Pincel Sigo todos os passos, porém quando aplicado o último passo, as elipses criado pelo Pincel contornando a letra, ficam deformadas (do maior para o menor), não preenche o contorno inteiro da letra como deve ser. Alguém sabe explicar o porque dessa deficiência no processo? Anexei uma imagem para entender melhor (a letra verde fui eu que fiz e com o contorno deformado, a letra azul está correta e com o preenchimento do contorno correto)

Estou com problema pois minha tag <p> esta ultrapassando o limite da div em vez de quebrar linha <!DOCTYPE html> <html> <head> <title></title> </head> <meta charset="utf-8"> <body> <style type="text/css"> #capa {width: 100%; height: 250px; background-color: red;} #conteudo{width: 1050px; margin: 0 auto; } #conteudo .colesq {width: 722px; float: left; height: 500px; background-color: white; border: 2px solid black; } #conteudo .coldir {width: 320px; float: right; height: 500px; background-color: white; border: 2px solid black;} #rodape {width: 100%; height: 50px; background-color: green; float: left;} #rodape {text-align: center; font-weight: bold;font-size: 18px;} .colesq h1 {text-align: center;} .colesq h3 {text-align: center;} .colesq p {text-align: justify; font-style: italic; font-size: 15px; float: left; } </style> <div id="capa"></div> <div id="conteudo"> <div class="colesq"> <h1>Titulo da postagem</h1> <h3>Segundo titulo</h3> <hr> sadsadasdsadadasdsadadsadsadadsadadasdasdasdasdsadadasdasdasdasdasdsadsadasdasdasdsadsadasdsadadasdsadadsadsadadsadadasdasdasdasdsadadasdasdasdasdasdsadsadasdasdasdsadsadasdsadadasdsadadsadsadadsadadasdasdasdasdsadadasdasdasdasdasdsadsadasdasdasdtesao </div> <div class="coldir"> s</div> </div> <div id="rodape"> <p>Rodape</p> </div> </body> </html>

Nâo sei se é o fórum adequado, favor mudar para o fórum correto caso necessário. Tenho minha base de dados no meu mysql local, e tentei através do phpmyadmin do provedor onde estou hospedando minhas páginas, exportar os meus dados. Salvei pois as tabelas num arquivo com extensão sql. A exportação gerou alguns erros. Textos são cortados pela metade, problemas com acentuação, etc. Então fiz manualmente, abri o MEU PHPMYADMIN LOCAL, e paralelamente abri o phpmyAdmin do provedor onde hospedo. e inseri um registro, fui copiando e colando. Mas ao executar as páginas que acessam o texto, o mesmo veio com erros de acentuação, aparecem aqueles baloezinhos em lugar de acentos. Então alterei minha pagina, e troquei o charset de UTF-8 para ISO-8859-1. Neste caso corrigiu os acentos dos baloezinhos, mas gerou outros tipos de erros com acentuação. Várias palavras acentuadas ou com til ou cecidilha ficaram assim: até, MARCAÇÃO , enfim, com os mesmos problemas na acentuação. Saberiam dizer o que poderia fazer para corrigir estes problemas??

Pessoal, tenho um arquivo txt com o seguinte layout: No 0012 de 31/01/2016 (Cod0) 12345 (Cod1) Cod1-023 (Cod2) 22/12/1945 (Cod3) travamento de portas gabinete ou de armario. (Cod0) 23456 (Cod1) Cod1-055 (Cod2) 01/01/2005 (Cod3) gaveteiro (Cod0) 78920 (Cod1) Cod1-077 (Cod2) 22/02/1975 (Cod3) clipe aluminio ou ferro (Cod4) anodizado --------------------------------- Preciso ler, linha alinha e agrupar pelo Cod0. Assim, esse Cod0 refere-se a cada novo registro, podendo conter Cod1, Cod2, Cod3 e por aí vai... Outro problema é que os Cod1, Cod2, Cod3 ,... podem conter uma linha adicional (exemplo do Cod 3, no primeiro registro). Tenho esse código implementado com base num exemplo aqui do Fórum, mas não consegui implementar o agrupamento e adição dessa eventual linha extra. <?php $filename = fopen("inventario.txt","r"); $grupo = array(); while( !feof($filename) ){ $line = trim(fgets($filename)); $codigo = substr($line,0,6); if($codigo == '(Cod0)'){ $grupo[] = array( 'Cod:' => substr($line,4,40).'<br>', 'Dados' => array() ); continue; } } fclose($filename); print_r($grupo);

Boa noite, pessoal. como eu faço para deixar as divs abaixo com o mesmo tamanho? Quero fazer um sistema de noticias igual o terra. Mas o texto esta influênciando no tamanho. exemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title></head> <style type="text/css"> #container{ background: #E6E3DD; display:block; margin: 0 auto; width: 95%; } #div_noticia{ background: #fff; display: inline-block; width: 20%; margin-left: 5%; margin-top: 15px; margin-bottom: 30px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } #titulo{ color:blue; text-align: center; font-size: 1.5em; } #sub_titulo{ color:black; text-align: center; font-size: 1em; } #imagem_noticia{ display:block; margin:10px auto; } </style> <body> <div id="container"> <?php $i = 1; while ($i <= 1) { $con = $i++; echo "<div id='div_noticia'>"; echo "<img id='imagem_noticia' src='http://imasters.com.br/wp-content/uploads/2016/12/seguran%C3%A7a.jpg'>"; echo "<div id='titulo'><h1>Notícias + </h1></div>"; echo "<div id='sub_titulo'><h2>Ver mais noticias da redação iMasters seguranca Conheça as principais ameaças virtuais de 2016 </h2></div>"; echo"</div>"; echo "<div id='div_noticia'>"; echo "<img id='imagem_noticia' src='http://imasters.com.br/wp-content/uploads/2016/12/AWS-1.jpg'>"; echo "<div id='titulo'><h1>Notícias + </h1></div>"; echo "<div id='sub_titulo'><h2>EC2 Container Service da Amazon adiciona suporte para Windows Containers</h2></div>"; echo"</div>"; } ?> </div> </body> </html>

Amigos, eu tenho um campo de texto em um formulário HTML e gostaria que, à medida em que o texto está sendo digitado, ao chegar no fim do campo texto vai sendo reduzido enquanto digita-o para que ele seja exibido inteiro no campo. Tem como fazer isso?? Nas pesquisa consigo fazer com % porcentagem... a fonte pode ser aumentada ou reduzido de acordo com a tela... mas neste caso tem que ser de acordo com o campo texto. Grato. Zorro -)---- B)

Boa tarde. Preciso reconhecer o texto que foi selecionado dentro de uma publicação de um blog e então exibir uma popup para compartilhar no Facebook e no Twitter esse texto. O problema é que eu já tentei algumas coisas e não tenho nem mais ideia do que fazer, pois nada funcionou. Se alguém puder me dar uma luz... segue abaixo as coisas que eu já tentei e não consegui fazer dar certo. Tentei ativar as funções usando o .select() do jQuery e também no OnClick, mas nada funcionou: EDIT: O que eu quero eu acabei de ver, é exatamente o que acontece no site do Tecmundo, dá uma olhada pra entender melhor. É só selecionar algum texto qualquer na publicação: http://www.tecmundo.com.br/patente/111775-6-patentes-tecnologias-loucas-nao-viraram-produtos-reais.htm?utm_source=tecmundo.com.br&utm_medium=home&utm_campaign=tv function getTextoSelPag(){ var s = ""; if(window.getSelection){ s = getSelection().toString(); } else if (document.selection){ s = document.selection.createRange().text; } return s; } $(document).ready(function(){ $('html, body').select(function(){ var texto; if(window.getSelection) { texto = String(window.getSelection()); }else if(document.selection){ texto = document.selection.createRange().text; }else{ texto = "Seu browser não suporta isto!"; } if(texto == '') texto = "Você deve selecionar algum texto para testar!"; $('#colar').html(texto); }); }); $('selector').click(function(){ var texto = $('textarea').get(0); var ss = texto.selectionStart; var se = texto.selectionEnd; var tf = texto.value.substring(ss,se); alert(tf); }); $(document).ready(function(){ $("p").select(function(){ alert("Texto selecionado!"); }); });

Gente Eu tenho uma tag <p></p> que retorna do banco de dados o nome de um vídeo, só que alguns nomes são muito grandes e acabam estragando o visual do site. Eu queria saber se tem como encurtar esse nome e quando a pessoa passar o mouse em cima ele ir aparecendo. Exemplo: tenho o nome "Britney Spears - Megamix (2016 Billboard Music Awards Performance)" por ser muito grande, eu queria que exibisse "Britney Spears - Megamix (20...": e quando a pessoa parasse o mouse em cima do nome acontecesse isso: (OBS: Imagens trabalhadas no photoshop) É possivel fazer com jquery? Obrigado

Boa tarde família do imasters Estou desenvolvendo um sisteminha simples no excel mas chegou em uma etapa que está me dando dor de cabeça Eu carreguei 4 municípios em uma combo box , e agora baseado no município escolhido ele vai listar todos os emails do mesmo abaixo separados por ; em texto Vejam que atrás está o banco de dados e vou listar todos os emails da coluna B que foram cadastrados tendo somente esse filtro de listar somente os emails do município escolhido, o sistema de cadastro está 100% e só falta isso O resultado ficaria por exemplo email1@email.com;email2@email.com;email3@email.com;email4@email.com; (e assim por diante) Alguém poderia me dar uma luz de como fazer isso?

Pessoal, criei uma função JavaScript que funciona quando eu clico em cima da DIV ela aumenta o HEIGHT expandido o conteúdo até aí sem novidades a ideia é mostrar somente o titulo e quando clicar mostrar o conteúdo, porém quando está mostrando só o titulo o texto vaza da DIV eu não quero por SCROLL porque eu não quero aquela barra de rolagem que o SCROLL cria.

Seguinte galera! quero fazer com que ao click do mouse dentro de uma textarea, seja selecionado todo o texto dentro dela. consegui fazer isso mas o problema é quando coloco mais de uma ai consegui resolver parcialmente com o siblings() mas a primeira textarea nunk seleciona. Como resolver? Preciso que se mantenham dentro do jquery....agradeço a todos! :D <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function(e) { $("#chave").siblings().click(function(e){ $(this).select(); }); }); </script> </head> <body> <textarea id="chave">value="Este conteúdo vai ser copiado</textarea> <textarea id="chave">value="Este conteúdo vai ser copiado</textarea> <textarea id="chave">value="Este conteúdo vai ser copiado</textarea> <textarea id="chave">value="Este conteúdo vai ser copiado</textarea> <textarea id="chave">value="Este conteúdo vai ser copiado</textarea> </body> </html>

Oi gente! Preciso da ajuda de vocês. Tenho esse script funcionando muito bem, mas eu queria que quando eu visualizasse o texto do arquivo msg.txt, que fosse em html e que o texto estivesse redimencionado. Nào consegui ainda saber qual a linha certa para incluir ------------------ Msg.txt <?php //abrimos o arquivo em leitura $arquivo = 'msg.txt'; $fp = fopen($arquivo,'r'); //lemos o arquivo $texto = fread($fp, filesize($arquivo)); //transformamos as quebras de linha em etiquetas <br> $texto = nl2br($texto); ?> <p class="textomsgini"> <? echo mb_strtolower( $texto, 'UTF-8' ); ?> </p> gravar.php <link rel="stylesheet" type="text/css" href="css/msgindex.css"/> <div id="pgravar" class="central"> <?php //PEGA OS DADOS ENVIADOS PELO FORMULÁRIO $mensagem = $_POST["texto"]; //PREPARA O CONTEÚDO A SER GRAVADO $conteudo = "$mensagem\r\n"; //ARQUIVO TXT $arquivo = "msg.txt"; //TENTA ABRIR O ARQUIVO TXT if (!$abrir = fopen($arquivo, "w+")) { echo "Erro abrindo arquivo ($arquivo)"; exit; } //ESCREVE NO ARQUIVO TXT if (!fwrite($abrir, $conteudo)) { print "Erro escrevendo no arquivo ($arquivo)"; exit; } echo "Arquivo gravado com Sucesso !!<p></p>"; //FECHA O ARQUIVO fclose($abrir); ?> <form style="text-align:center"> <input type="button" value="Voltar" onClick="JavaScript: window.history.back();"> </form> </div> cadmisgine.php <link rel="stylesheet" type="text/css" href="css/msgindex.css"/> <div id="digitarmsg" class="central"> <form name="msgindex" method="post" action="gravar.php"> <h2>MENSAGEM</h2> <p>caracteres restantes: <span id="cont">580</span>)</p> <textarea onkeyup="blocTexto(this.value)" id="texto" name="texto" cols="30" rows="5" tabindex="2" style="width:400px; height:300px;"></textarea> <p> <input type="submit" name="Submit" value="Enviar"></p> </form> <script type="text/javascript"> function blocTexto(valor) { quant = 580; total = valor.length; if(total <= quant) { resto = quant - total; document.getElementById('cont').innerHTML = resto; } else { document.getElementById('texto').value = valor.substr(0,quant); } } </script> </div>

Se Puderem me Ajudar Aqui está o CSS. Comecei a fazer um Curso de Web Designer, peguei esse menu de um site, estou tentando aprender um pouco mais sobre css Aqui está o CSS @import url([url=http://fonts.googleapis.com/css?family=Raleway:400,200);]http://fonts.googleapis.com/css?family=Raleway:400,200);[/url] #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: 220px; font-family: Raleway, sans-serif; color: #ffffff; } #cssmenu ul ul { display: none; } #cssmenu > ul > li.active > ul { display: block; } .align-right { float: right; } #cssmenu > ul > li > a { padding: 16px 22px; cursor: pointer; z-index: 2; font-size: 16px; text-decoration: none; color: #ffffff; background: #3ab4a6; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } #cssmenu > ul > li > a:hover { color: #d8f3f0; } #cssmenu ul > li.has-sub > a:after { position: absolute; right: 26px; top: 19px; z-index: 5; display: block; height: 10px; width: 2px; background: #ffffff; content: ""; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #cssmenu ul > li.has-sub > a:before { position: absolute; right: 22px; top: 23px; display: block; width: 10px; height: 2px; background: #ffffff; content: ""; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #cssmenu ul > li.has-sub.open > a:after, #cssmenu ul > li.has-sub.open > a:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #cssmenu ul ul li a { padding: 14px 22px; cursor: pointer; z-index: 2; font-size: 14px; text-decoration: none; color: #dddddd; background: #49505a; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } #cssmenu ul ul ul li a { padding-left: 32px; } #cssmenu ul ul li a:hover { color: #ffffff; } #cssmenu ul ul > li.has-sub > a:after { top: 16px; right: 26px; background: #dddddd; } #cssmenu ul ul > li.has-sub > a:before { top: 20px; background: #dddddd; } AQUI está o HTML <!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="[url=http://code.jquery.com/jquery-latest.min.js]http://code.jquery.com/jquery-latest.min.js[/url]" type="text/javascript"></script> <script src="script.js"></script> <title>CURIOSIDADES ABSURDAS</title> <img src="cima.png"> </head> <body> <div id='cssmenu'> <ul> <li><a href='#'>Home</a></li> <li class='active has-sub'><a href='#'>Products</a> <ul> <li class='has-sub'><a href='#'>Product 1</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li class='has-sub'><a href='#'>Product 2</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </body> <html>