Estou montando um menu pro meu site, infelizmente tenho conhecimentos meio limitados... rssr o comando hover não esta funcionando como deveria na barra de baixo... a ideia que permaneça a imagem e só quando passa-se o mouse ele daria um brilho apenas... como no de cima.
Question
Gilalkmin
Boa tarde galera!!!
Estou montando um menu pro meu site, infelizmente tenho conhecimentos meio limitados... rssr o comando hover não esta funcionando como deveria na barra de baixo... a ideia que permaneça a imagem e só quando passa-se o mouse ele daria um brilho apenas... como no de cima.
segue o link como demonstrativo...
http://strikelanhouse.com.br/teste/barrateste.html
segue o script abaixo:
@charset "utf-8";
/* CSS Document */
body{
margin: 0 auto 0 auto;
padding: 0 0;
}
#todo{
margin: 0 auto 0 auto;
width: 1000px;
height:auto;
position:relative;
padding: 0 0;
background:
}
#fundo{
background: url(../imagens/fundoazulclaro.png);
padding: 0 0;
margin: 0 auto 0 auto;
width:1000px;
height:1500px;
position:absolute;
}
/*** topo ***/
#topo{
margin: 0 auto 0 auto;
padding:0 0;
width:1000px;
height:245px;
position:absolute;
left: 0px;
}
/*** menu superior ***/
#menusuper{
width:1000px;
height:40px;
top:0px;
left:0px;
}
/*** barra superior ***/
#wrapper {
display: block;
width: 1000px;
height:40px;
margin: 0px auto;
font: 100%/1.25 arial, helvetica, sans-serif;
color: #000000;
}
/*** formato menu ***/
#memu{
display: block;
text-align: center;
font-size: 120%;
text-decoration: none;
position:absolute;
}
#menu ul {
width: 1000px; /*** ajustar valor se texto menor / maior (tamanho total da pagina) ***/
height: 40px;
margin: 0 auto;
padding: 0;
line-height: 40px; /*** centraliza o texto na vertical na mesma altura ***/
text-decoration: none;
background:url(../imagens/menu_bg.jpg) repeat-x left top;
}
/*Left Corner*/
#menu ul li.left {
display: block;
float: left;
clear: left;
width: 100px;
height: 40px;
background:url(../imagens/menu_l.jpg) no-repeat left top;
}
/*Right Corner*/
#menu ul li.right {
display: block;
float: right;
clear: right;
width: 40px;
height: 40px;
background:url(../imagens/menu_r.jpg) no-repeat right top;
}
#menu ul li {
width: auto;
display: inline;
float: left;
list-style: none;
text-align: center;
text-decoration: none;
}
#menu ul li a {
display: block;
text-decoration: none;
text-transform: inherit;
padding: 0 25px;
color: #CCCCCC;
}
#menu ul li em {
display: block;
float: left;
width: 2px;
height: 40px;
background:url(../imagens/menu_sep.jpg) no-repeat left top;
}
/*** ultimo separador ***/
/*** Sera add um separador no ultimo link ***/
#menu ul li.sep {
width: 2px;
background:url(../imagens/menu_sep.jpg) no-repeat left top;
}
#menu ul li a:hover, #menu ul li a:active {
background: url(../imagens/menu_over.jpg) repeat-x center top;
text-decoration: none;
Color: white;
}
#menu ul li a:active {
font-weight: bold;
cursor: default;
}
/*** logotipo ***/
#logo{
width:1000px;
height:135px;
top:50px;
left:0px;
position:absolute;
alignment-adjust:central;
}
#logotipo{
width:760px;
height:135px;
top:0px;
left:120px;
position:absolute;
alignment-adjust: central;
/*background:url(../imagens/logo_strike.png) no-repeat center;*/
}
/*** menu inferior ***/
#infmenu{
width:1000px;
height:40px;
top:195px;
left:0;
position:absolute;
}
/****** menu inferior *****/
#wrapperinf{
display: block;
width: 1000px;
height:40px;
color: #000000;
}
#menuinf{
display: block;
text-align: center;
font-size: 120%;
text-decoration: none;
position:absolute;
float:right;
top:0px;
left:0px;
}
#menuinf ul {
width: 1000px; /*** ajustar valor se texto menor / maior (tamanho total da pagina) ***/
height: 40px;
margin: 0px auto;
padding: 0;
line-height: 40px; /*** centraliza o texto na vertical na mesma altura ***/
text-decoration: none;
background:url(../imagens/menu_bg.jpg) repeat-x left top;
}
/*** lado esquerdo ***/
#menuinf ul li.leftinf {
display: block;
float: left;
clear: left;
width: 105px;
height: 40px;
background:url(../imagens/menu_l.jpg) no-repeat left top;
}
/*** lado direito ***/
#menuinf ul li.rightinf {
display: block;
float: right;
clear: right;
width: 40px;
height: 40px;
background:url(../imagens/menu_r.jpg) no-repeat right top;
}
#menuinf ul li {
width: auto;
display: inline;
float: left;
list-style: none;
text-align: center;
text-decoration: none;
}
#menuinf ul li a {
display: block;
text-decoration: none;
text-transform: inherit;
padding: 04px 33px;
color: #CCCCCC;
}
#menuinf ul li em {
display: block;
float: left;
width: 2px;
height: 40px;
background:url(../imagens/menu_sep.jpg) no-repeat left top;
}
/*** ultimo separador ***/
/*** Sera add um separador no ultimo link ***/
#menuinf ul li.sepinf {
width: 2px;
background:url(../imagens/menu_sep.jpg) no-repeat left top;
}
#menuinf ul li a:hover, #menuinf ul li a:active {
background: url(../imagens/menu_over.jpg) repeat-x center top;
text-decoration: none;
Color: white;
}
#menuinf ul li a:active {
font-weight: bold;
cursor: default;
}
/*** get ***/
.orkut{
width:32px;
height:32px;
background: url(../imagens/orkut_get.png) no-repeat;
background-position: center;
}
#menuinf ul li a:hover .orkut {
width:32px;
height:32px;
background-image: url(../imagens/orkut_get.png) no-repeat;
background-position: center;
}
.MSN{
width:32px;
height:32px;
background: url(../imagens/msn_get.png) no-repeat;
background-position: center;
}
.face{
width:32px;
height:32px;
background: url(../imagens/face_get.png) no-repeat;
background-position: center;
}
.twitter{
width:32px;
height:32px;
background: url(../imagens/twitter_get.png) no-repeat;
background-position: center;
}
.myspace{
width:32px;
height:32px;
background: url(../imagens/myspace_get.png) no-repeat;
background-position: center;
}
.youtube{
width:32px;
height:32px;
background: url(../imagens/youtube_get.png) no-repeat;
background-position: center;
}
.sinuca{
width:32px;
height:32px;
background: url(../imagens/sinuca_yahoo_get.png) no-repeat;
background-position: center;
}
.tempo{
width:32px;
height:32px;
background: url(../imagens/tempo_get.png) no-repeat;
background-position: center;
}
/*** clear ***/
#clear{
clear:both;
}
/***IE hack***/
<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>barra</title>
<link rel="stylesheet" href="stylo/all.css" type="text/css" />
</head>
<body>
<div id="todo">
<div id="fundo">
<div id="topo">
<div id="menusuper">
<div id="wrapper">
<div id="menu">
<ul>
<li class="left"> </li>
<li><em></em><a href="#">Home</a></li>
<li><em></em><a href="#">Loja</a></li>
<li><em></em><a href="#">Jogos Online</a></li>
<li><em></em><a href="#">Jogos Rede</a></li>
<li><em></em><a href="#">Serviços</a></li>
<li><em></em><a href="#">Sobre Nós</a></li>
<li><em></em><a href="#">Contato</a></li>
<li class="sep"> </li>
<li class="right"> </li>
</ul><!--/ul-->
</div><!--/menu-->
</div><!--/wrapper-->
</div><!--/menu superior-->
<div id="logo">
<div id="logotipo"></div><!--/logotipo-->
</div><!--/logo-->
<div id="infmenu">
<div id="wrapperinf">
<div id="menuinf">
<ul>
<li class="leftinf"> </li>
<li><em></em><a href="http://orkut.com.br/" class="orkut"></a></li>
<li><em></em><a href="http://hotmail.com/" class="MSN"></a></li>
<li><em></em><a href="http://www.facebook.com/" class="face"></a></li>
<li><em></em><a href="http://twitter.com/" class="twitter"></a></li>
<li><em></em><a href="http://br.myspace.com/" class="myspace"></a></li>
<li><em></em><a href="http://youtube.com/" class="youtube"></a></li>
<li><em></em><a href="http://br.play.yahoo.com/games/login?game=Pool" class="sinuca"></a></li>
<li><em></em><a href="http://tempoagora.uol.com.br/previsaodotempo.html/brasil/PraiaGrande-SP/" class="tempo"></a></li>
<li class="sepinf"> </li>
<li class="rightinf"> </li>
</ul> <!--/ul-->
</div><!--/menuinf-->
</div><!--/wrapperinf-->
</div><!--/infmenu-->
</div><!--/topo-->
</div><!--/fundo-->
</div><!--/todo-->
</body><!--/body-->
</html><!--/hmtl-->
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.