Tip: You can modify some of the code before running
<! DOCTYPE html> <ptml> <pead> <title>css3 make mouse hover hint Bubbles content menu </title> <style typ E= "Text/css" > body{background: #D6D3C9; Color: #383835; Font-family:arial, Arial, Helvetica, Sans-serif; } #bubblemenu li {display:inline; margin-left:15px; Cursor:pointer; #bubblemenu li > div {width:150px; min-height:100px; Position:absolute; Display:inline; Margin-left: -120px; padding:5px; Visibility:hidden; opacity:0; Margin-top: -125px; Background: #ffffff; Font-size:1em; /* Setting The Border-radius property for all Browsers * *-MOZ-BORDER-RADIUS:5PX; * * Firefox/-webkit-border-radius:5px; * Safari and Chrome * * border-radius:5px; /* Browsers that Support it like Opera/* Setting the Box-shadow property to all Browsers * -moz-box-shadow:0 0 8px Gray; * * Firefox/-webkit-box-shadow:0 0 8px Gray; * Safari and Chrome * * Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' #272229 ', direction=135, strength=3); /* IE */box-shadow:0 0 8px Gray; /* Browsers that Support it like Opera/* Setting The Transition property to all Browsers * *-moz-transition: All 0.5s ease-in-out; /* Firefox * *-webkit-transition:all 0.5s ease-in-out; * Safari and Chrome */-o-transition:all 0.5s ease-in-out; /* Opera * * Transition:all 0.5s ease-in-out; /* Browsers that Support it */} #bubblemenu li:hover > div { visibility:visible; Opacity:1; Margin-top: -150px; /* SetTing the Transition property to all Browsers * *-moz-transition:all 0.5s ease-in-out; /* Firefox * *-webkit-transition:all 0.5s ease-in-out; * Safari and Chrome */-o-transition:all 0.5s ease-in-out; /* Opera * * Transition:all 0.5s ease-in-out; /* Browsers that Support it/} </style> </pead> <body> <p>coda Effect with css3</p> <br/> <br/> <br/> <br/> <br/> <br/> ; <br/> <ul id= "Bubblemenu" > <li> Penn Jillett <div> My favorite thing about the Internet is ' that ' you ' go ' to ' the private world's real creeps without have to SME ll them. </div> </li> <li> Thomas Watson <div> I th Ink There is a world market for maybe five computers. </div> </li> <li> Bill Gates <div> 640K ought to is enough for anybody. </div> </li> <li> Sam Ewing <div> Computer s are like bikinis. They save people a lot of guesswork. </div> </li> </ul> <div > </div></body> </ptml></td> < /tr> </table>
Tip: You can modify some of the code before running
