Barra de Navegação/Menu CSS.
Olá,
Pessoal, preciso de uma grande ajuda(grande pra mim, pra vcs é moleza).
Eu preciso diminuir a altura(height) da barra, não estou conseguindo.
Comecei a estudar css esses dias, mas tem coisas que ainda não sei.
O código do menu é este:
<!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">](http://www.w3.org/1999/xhtml)
<head>
<title>Drop-Down Menus: Part 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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 62.5% verdana;
}ul#primary-nav,
ul#primary-nav ul {
width: 145px;
height: 15px;
margin: 0;
padding: 0;
background: #ccc; /* IE6 Bug */
font-size: 100%;
max-height: 15px;
}ul#primary-nav {
float: left;
width: 98%;
background: #88a0b8;
COLOR: black;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: 8pt;
FONT-WEIGHT: bold
}ul#primary-nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}ul#primary-nav li {
position: relative;
list-style: none;
float: left;
width: 150px; /* Width of Menu Items */
height: 10;
}ul#primary-nav li a,
ul#primary-nav li li a {
display: block;
text-decoration: none;
color: #777;
padding: 5px;
COLOR: black;
FONT-FAMILY: Tahoma, Verdana;
FONT-SIZE: 8pt;
FONT-WEIGHT: bold
}/ 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;
}ul#primary-nav ul ul {
left: 150px;
top: 0;
}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; } / 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: transparent url(arrow-down.gif) right center no-repeat; }
ul#primary-nav li li.menuparent { background: transparent url(arrow-right.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9 !important; }
ul#primary-nav li a:hover { color: #E2144A; }
</style>
</head>
<body>
<ul id="primary-nav">
<li class="menuparent"><a href="#">Produtos e Serviços</a>
<ul>
<li><a href="#">Programas com fontes</a></li>
<li><a href="#">Componentes com fontes</a></li>
<li><a href="#">Donationware com fontes</a></li>
<li><a href="#">Produtos de parceiros</a></li>
<li><a href="#">Equipamentos</a></li>
<li><a href="#">CD ROM´s e Livros</a></li>
</ul>
</li>
<li><a href="#">Demonstrações</a></li>
<li><a href="#">Como Comprar</a></li>
<li><a href="#">Faça seu pedido</a></li>
<li><a href="#">Downloads úteis</a></li>
<li><a href="#">Artigos e Dicas</a></li>
<li><a href="#">Links úteis</a></li>
</ul>
</body>
</html>E vejam o menu em ação para entenderem melhor o que to querendo. É a segunda barra la, vejam que altura ta maior que a primeira barra, e na opção "Produtos e Serviços" quando você passa o mouse em cima, o sub-menu não abre corretamente, abre meio de lado.
Alguem poderia me ajudar?
Grato.
Discussão (5)
Carregando comentários...