Caros amigos, preciso colocar submenu neste menu mas nao consigo. Quem puder me ajudar da uma forcinha ae.
segue o codigo.
<head>
<style type="text/css">
#menu {width:980}
#menu li {display: inline;}
#menu li a {background: url(img/topo/menu.png); float: left; height: 27px;text-indent: -10000px; margin-right: 0px;}
#menu .um {background-position: 0px 0px; width: 147px;}
#menu .um:hover {background-position: 0px 27px}
#menu .dois {background-position: 833px 0; width: 147px;}
#menu .dois:hover {background-position: 833px 27;}
#menu .tres {background-position: 686px 0px; width: 147px;}
#menu .tres:hover {background-position: 687px 27px;}
#menu .quatro {background-position: 540px 0px; width: 97px;}
#menu .quatro:hover {background-position: 540px 27px;}
#menu .cinco {background-position: 444px 0px; width: 147px;}
#menu .cinco:hover {background-position: 444px 27px;}
#menu .seis {background-position: 297px 0px; width: 147px;}
#menu .seis:hover {background-position: 297px 27px;}
#menu .sete {background-position: 150px 0px; width: 147px;}
#menu .sete:hover {background-position: 150px 27px;}
</style>
</head>
<body>
<ul id="menu">
<li><a class="um" href="#">Home</a></li>
<li><a class="dois" href="#">Quem Somos</a></li>
<li><a class="tres" href="#">Serviços</a></li>
<li><a class="quatro" href="#">Home</a></li>
<li><a class="cinco" href="#">Cursos</a></li>
<li><a class="seis" href="#">Núcleos</a></li>
<li><a class="sete" href="#">Matrículas</a></li>
</ul>
</body>
</html>
Menu Sprite - Submenu
Started By Bacalhao, 04/10/2011, 19:11
1 reply to this topic
#2
Dougkusanagi
-
- Usuários
-
- 6 posts
Novato no fórum
- Sexo:Masculino
- Localidade:Magé
Posted 15/11/2011, 13:35
Caros amigos, preciso colocar submenu neste menu mas nao consigo. Quem puder me ajudar da uma forcinha ae.
segue o codigo.
<head>
<style type="text/css">
#menu {width:980}
#menu li {display: inline;}
#menu li a {background: url(img/topo/menu.png); float: left; height: 27px;text-indent: -10000px; margin-right: 0px;}
#menu .um {background-position: 0px 0px; width: 147px;}
#menu .um:hover {background-position: 0px 27px}
#menu .dois {background-position: 833px 0; width: 147px;}
#menu .dois:hover {background-position: 833px 27;}
#menu .tres {background-position: 686px 0px; width: 147px;}
#menu .tres:hover {background-position: 687px 27px;}
#menu .quatro {background-position: 540px 0px; width: 97px;}
#menu .quatro:hover {background-position: 540px 27px;}
#menu .cinco {background-position: 444px 0px; width: 147px;}
#menu .cinco:hover {background-position: 444px 27px;}
#menu .seis {background-position: 297px 0px; width: 147px;}
#menu .seis:hover {background-position: 297px 27px;}
#menu .sete {background-position: 150px 0px; width: 147px;}
#menu .sete:hover {background-position: 150px 27px;}
</style>
</head>
<body>
<ul id="menu">
<li><a class="um" href="#">Home</a></li>
<li><a class="dois" href="#">Quem Somos</a></li>
<li><a class="tres" href="#">Serviços</a></li>
<li><a class="quatro" href="#">Home</a></li>
<li><a class="cinco" href="#">Cursos</a></li>
<li><a class="seis" href="#">Núcleos</a></li>
<li><a class="sete" href="#">Matrículas</a></li>
</ul>
</body>
</html>
cara vc não especificou detalhes como se qr na horizontal, se vc quer um submenu oculto...
pois bem se vc qr que ele fique oculto e apareça ao passar o mouse vc pode manipular a propriedade display do css...
aqui vai um exemplo...
http://jsfiddle.net/Pmc32/
espero ter ajudado.
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)
