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

[_M!K0L_ 1]

Resultado já com o mouse em cima do link 2

 

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>

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

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

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

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

[Giovani 104]

A resposta do outro tópico pode responder esse também.

http://forum.imasters.com.br/index.php?s=&...st&p=885670

 

Nesse caso recomendo pesquisar, além de menus, sobre tooltip.

Vai ficar mais simples.

 

Como disse no outro tópico, pode até funcionar, mas não está correto.

 

Outra dia, recicle seu código css, ele está muito sujo.

http://www.imasters.com.br/artigo/3780