Entrar
Cadastre-se
Ajuda
Estou fazendo um menu de css com lista html ele esta funcionando legal com excessão do alinhamento.
Tipo assim o código html tem uma opção feita com <select name=".."> e quando eu passo o mouse pelo menu ele fica abaixo da opção select porem eu quero que o menu fique acima de tudo.
Olha como ficou:
Erro no menu. Ficou abaixo
Como eu disse o menu ficou abaixo e preciso que fique acima! Alguém sabe onde estou errando?
Estou usando esse código para fazer o menu:
Esse é o código das listas <ul> e <li>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<link href="dhtml-horiz.css" rel="styleSheet" type="text/css" />
<script language="Javascript" src="dhtml.js" type="text/Javascript"></script>
<style type="text/css">
body
{
text-transform: capitalize;
}
</style>
<head>
<body>
<ul id="navmenu">
<li><a href="home.php">home</a></li>
<li><a href="#">cadastro</a>
<ul>
<li><a href="#">prestadores</a></li>
<li><a href="#">seguradoras</a></li>
<li><a href="#">seguros</a>
<ul>
<li><a href="#">agricola</a></li>
<li><a href="#">vida</a></li>
<li><a href="#">segurados</a></li>
</ul>
</li>
<li><a href="#">colaboradores</a>
<ul>
<li><a href="#">medicos</a></li>
<li><a href="#">hospitais</a></li>
<li><a href="#">clínicas</a></li>
<li><a href="#">laboratórios</a></li>
<li><a href="#">delegacias</a></li>
<li><a href="#">cartórios</a></li>
<li><a href="#">corretores</a></li>
<li><a href="#">advogados</a></li>
<li><a href="#">outros</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">consulta</a>
<ul>
.....Esse é o código que javascript que faz o controle:
navHover = function() {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);E esse é o código css
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px; /*For KHTML*/
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul li {
float: none; /*For Gecko*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}Como eu faço para deixar o menu acima de tudo?
Quote
