menu css

Rafael-Moran · November 7, 2011

Bom pessoal, tenho um menu em css, que quando o mouse passa possa por cima, muda a cor da fonte e fica sublinhado.

mas esta funcionando perfeitamente no IE, mas no Firefox e no Chrono não funcina.

Bom para ser mais exato, apenas o link SAC funciona, os outros não.

segue o codigo a baixo.

CSS do Menu

#menu{
padding:220px 0 0 430px;
position: absolute; 

}

#menu lo{
list-style-type:none;
display:inline
}

#menu a{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:black;
text-transform:uppercase;
text-decoration:none;
display:block;
float:left;
}

#menu a:visited{
color:black;
border:0px;
}

#menu #active, #menu a:hover{
color:#0066CC;
border-bottom:2px solid #FF6633;
}
#menu1{
padding:365px 0 0 410px;
position: absolute; 

}
#menu1 lo{
list-style-type:none;
display:inline
}

#menu1 a{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:black;
text-transform:uppercase;
text-decoration:none;
display:block;
float:left;
}

#menu1 a:visited{
color:black;
border:0px;
}

#menu1 #active, #menu1 a:hover{
color:#0066CC;
border-bottom:2px solid #FF6633;
}


#menu2{
padding:510px 0 0 420px;
position: absolute; 

}

#menu2 lo{
list-style-type:none;
display:inline;
}

#menu2 a{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:black;
text-transform:uppercase;
text-decoration:none;
display:block;
float:left;
}

#menu2 a:visited{
color:black;
border:0px;
}

#menu2 #active, #menu2 a:hover{
color:#0066CC;
border-bottom:2px solid #FF6633;
}


#menu3{
padding:650px 0 0 400px;
position: absolute; 

}
#menu3 lo{
list-style-type:none;
display:inline
}
#menu3 a{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:black;
text-transform:uppercase;
text-decoration:none;
display:block;
float:left;
}
#menu3 a:visited{
color:black;
border:0px;
}

#menu3 #active, #menu3 a:hover{
color:#0066CC;
border-bottom:2px solid #FF6633;
}




#menu4{
padding:800px 0 0 435px;
position: absolute; 

}

#menu4 lo{
list-style-type:none;
display:inline
}

#menu4 a{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:black;
text-transform:uppercase;
text-decoration:none;
display:block;
float:left;
}

#menu4 a:visited{
color:black;
border:0px;
}

#menu4 #active, #menu4 a:hover{
color:#0066CC;
border-bottom:2px solid #FF6633;
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
    <title>Tua Papelaria</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="../CSS/css-home.css" />
    

</head>

<body bgcolor="#FFCC33">

                                <ol id="menu">
                                    
                                    <a href="home.php" id="active"><b>Home</b></a>
                                </ol>
                                <ol id="menu1">
                                    <a href="../produtos/produtos.php" ><b><font color="black">Produtos </font></b></a>
                                </ol >
                                
                                <ol id="menu2">                    
                                    <a href="#"><b>Em Casa</b></a>
                                </ol >    
                                
                                <ol id="menu3">                
                                    <a href="#"><b>Quem Somos</b></a>
                                </ol>    
                                
                                <ol id="menu4">                
                                    <a href="#"><b>SAC</b></a>
                                </ol>

Espero poder contar com a ajuda e Experience de vocês.

Obrigado a todos pela força.

Edited November 8, 2011 by kuroi
Adicionar tag CODE

Mika-san · November 12, 2011

Primeiro tire todos os position:absolute,

coloque um valor igual para todos os menus no primeiro valor de padding e um height também para ficar certinho no IE 7 também.

Fazendo isso fica certo =D

Rafael-Moran · November 12, 2011

Valeu cara. soluciono o meu problema!

Sign In

menu css

Question

Rafael-Moran

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Mika-san

Link to comment

Share on other sites

Rafael-Moran

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity