Tenho o seguinte menú:
<!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" lang="pt-br" xml:lang="pt-br">
<head>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav".getElementsByTagName("li"
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent" {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
body { font: normal 50% BankGothic Md BT, tahoma; }
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
/* width: 800px; */ /* Width of Menu Items */
border-bottom: 0px; solid #ccc;
background: lightgreen; /* IE6 Bug */
/* background: green; /* IE6 Bug */ cor do fundo dos menus
font-size-removed: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
display: inline;
float:left;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
float:left;
color: black;
/* color: red; cor das letras do menu */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 1;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
left: 0px; /* Set 1px less than menu width */
top: 24px;
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav li:hover ul ul ,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; top: 17px;} /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menuparent { background: green url(arrow-down.gif) right center no-repeat; }
/* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: white; }
/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */
ul#primary-nav li a:hover { color: orange; }
/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */
</style>
</head>
<body>
<ul id="primary-nav">
<li class="menuparent"><a href="#">Institucional</a></li>
<li class="menuparent"><a href="#">Ensino Fundamental</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">Ensino Médio</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">Ensino Técnico</a>
<ul>
<li><a href="#">Brazil</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>Porém o seu submenu está na horizontal, como faço paa deixá-lo na vertical?
Obrigado.
