<!DOCTYPE html> <html> <head> <style> #aside{ width:250px; height:auto; background-color:rgb(250,250,250); } #aside ul{ list-style-type:none; padding:0px; margin:0px; border-radius:5px; } #aside ul li a{ text-decoration:none; padding:7px 50px; display:block; background-color:rgba(250,250,250,0.5); border:solid rgba(200,200,200,0.5); color:black; border-width:0px 2px 2px 2px; } #aside ul li a:hover{ background-color:rgba(200,200,200,0.5); } #aside-heading{ margin:0px; width:250px; background-color:rgb(26,161,242); padding:10px 0px; text-align:center; color:white; border-radius:5px 5px 0px 0px; } </style> </head> <body> <h2 id="aside-heading">This is a heading</h2> <aside id="aside"> <ul> <li><a href="#">List item1</a></li> <li><a href="#">List item2</a></li> <li><a href="#">List item3</a></li> <li><a href="#">List item4</a></li> </ul> </aside> </body> </html>
Run
×
Share