wastehavensports
New Member
I'm trying to make the aside appear like this figure http://i.stack.imgur.com/rvCoB.jpgand when mouse hover over it , it should appear like this figure http://dc616.4shared.com/img/C_un4lvk/s7/0.9417452976564042/444.jpgthe code of aside \[code\] <aside> <div>Hardware <span> Printer, DVD, CR-ROM, mouse, keyboard, scanner, router, modem, sound card </span> </div> <div>Software <span> Adobe Reader, Microsoft Word, Eclipse IDE, Skype, McAfee Antivirus, BitComet, RealPlayer </span> </div> </aside>\[/code\]but when I coded I got a different result this is my code \[code\] aside {float:left;margin: 30px 50px 30px 20px;background-color:#f0f8ff;display:block; padding-top:10px; padding-bottom:10px; border:dotted pink; text-align:center;}div{width:80px;padding-top:10px; padding-bottom:10px;}div:hover{color:#fff; background-color:darkblue;width:300px; text-align:left; padding-left:6px; padding-top:20px;} aside div span{ display:none; } aside div:hover span { display:block; padding-left:80px; padding-bottom:8px; border:none; } </style>\[/code\]can anyone help me to modify my code