Publicado em 5 de out.

Menu em CSS c/ Descrição, simples + legal!

Resultado já com o mouse em cima do link 2

/applications/core/interface/imageproxy/imageproxy.php?img=http://img65.imageshack.us/img65/2049/imagemvi9.png&key=42a2dc0120ea5471114374d360ec24934cbe75e1528df6af6d4453de4accc5df" alt="Imagem Postada" />

CSS

[url="http-~~-//december.com/html/4/element/style.html"]<style[/url] type="text/css">

#menu {
        width: 150px;
        font-family: Arial;
        font-size: 12px;
        font-weight: normal;
        background-color:#CCCCCC;
        padding-left: 3px;
        border-bottom-width: 1px;
        border-bottom-color:#CCCCCC;
        border-bottom-style: solid;
}
#text1 {
        background-color:#FFFFFF;
        border: 1px solid #FFFFFF;
}

#menu span {

visibility:hidden;
}

#menu span{

        font-size:1px;
        line-height: 0px;
}

#menu:hover span {

text-decoration: none;
color:#333333;
width: 165px;
line-height: 20px;
font-size:12px;
visibility: visible;
position:absolute;
left: 115px;
top:auto;
border: 1px solid #FFCC00;
padding: 2px;
background-color: #FFFF99;
margin: 2px;
}

#text1:hover {
text-decoration: underline;
cursor:pointer; }

#menu:hover{ background-color:#FF0000; }
#menu a.hreff { color:#000000; }
</style>

Dentro da TAG BODY

[url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="menu">
[url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#" class="hreff">
[url="http-~~-//december.com/html/4/element/div.html"]<div[/url] id="text1">

                Link #1[url="http-~~-//december.com/html/4/element/span.html"]<span>[/url]Descrição do Link número #1</span>
        </div>
</a>
</div>

                Link #2[url="http-~~-//december.com/html/4/element/span.html"]<span>[/url]Descrição do Link número #2</span>
        </div>
</a>
</div>

                Link #3[url="http-~~-//december.com/html/4/element/span.html"]<span>[/url]Descrição do Link número #3</span>
        </div>
</a>
</div>

                Link #4[url="http-~~-//december.com/html/4/element/span.html"]<span>[/url]Descrição do Link número #4</span>
        </div>
</a>
</div>

                Link #5[url="http-~~-//december.com/html/4/element/span.html"]<span>[/url]Descrição do Link número #5</span>
        </div>
</a>
</div>

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

#menu { width: 150px; font-family: Arial; font-size: 12px; font-weight: normal; background-color:#CCCCCC; padding-left: 3px; border-bottom-width: 1px; border-bottom-color:#CCCCCC; border-bottom-style: solid; } #text1 { background-color:#FFFFFF; border: 1px solid #FFFFFF; }

text-decoration: none; color:#333333; width: 165px; line-height: 20px; font-size:12px; visibility: visible; position:absolute; left: 115px; top:auto; border: 1px solid #FFCC00; padding: 2px; background-color: #FFFF99; margin: 2px; }