Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

phfmiranda

Menu em CSS não funciona

Por , em Desenvolvimento frontend

Recommended Posts

phfmiranda    0

phfmiranda
Postado

Boa noite Pessoal,

 

Estava montando um menu em Drop Down usando css, porem não funciona de jeito nenhum, onde estou errando?

 

menu.html

<!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>
<link href="menucss.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">Cadastros</a>
<ul>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>


</ul>
</li>
</ul>

<ul>
<li><a href="#">Alterações</a>
<ul>
<li><a href="#">Altera cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
</ul>
</li>
</ul>

<br class="clearFloat" />

</div>
</div>

</body>
</html>

 

menucss.css

@charset "utf-8";
/* CSS Document */

#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
floar: left;
position:relative
}

#nadMenu ul li a {
text-align:center;
font-family:"Verdana, Geneva, sans-serif", cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}

#navMenu ul li:hover ul {
visibility::visible;
}

.clearFloat{
clear:both;
margin:0;
padding:0;
}

 

Valeu pessoal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

No estilo "#navMenu ul li:hover ul" a propriedade visibility está com dois pontos a mais.

Utilizando visibility os elementos invisíveis ainda ocupam espaço na tela. Pode trocar "display" para que eles não ocupem.

 

W3 Schools

Tip: Even invisible elements takes up space on the page. Use the "display" property to create invisible elements that do not take up space!

Compartilhar este post

Link para o post
Compartilhar em outros sites

phfmiranda    0

phfmiranda
Postado

Ok, consegui trocar o visibility pelo display, porem ainda não consegui colocar o menu ao lado.

 

Ex: Cadastros Alteração Consulta.

 

Como posso fazer isso?

 

Valeu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Phfmiranda, fiz um menu usando display e com o recurso do javascript:

 

<!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>
<style>
* {margin:0; padding:0;}

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

ul li {position: relative;	}

li ul {position: absolute;left: 149px;top: 0;display: none; }

ul li a {display: block; text-decoration: none; color: #222; background: #B4B4B4; padding: 5px; border: 1px solid #ccc; border-bottom:0;}

li:hover ul, li.over ul {display: block; }

.clearFloat{
       clear:both;
       margin:0;
       padding:0;
}
</style>
<script>
// JavaScript Document

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>
</head>
<body>

<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">Cadastros</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>


</ul>
</li>
</ul>

<ul>
<li><a href="#">Alterações</a>
<ul>
<li><a href="#">Altera cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
<li><a href="#">cad</a></li>
</ul>
</li>
</ul>

<br class="clearFloat" />

</div>
</div>

</body>
</html>

 

Bom estudo :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito