Www.Free-Learn.Ir
اجرا کن »
<!DOCTYPE html> <html> <head> <style> body{background-color: #f2f2f2;} ul { list-style-type: none; margin: 0; padding: 0; width: 250px; background-color: #fff; float:right; overflow:hidden; direction:rtl; box-shadow: 0 0 20px rgba(0,0,0,0.08); } li a { display: block; color: #000; padding: 10px 16px; text-decoration: none; transition:0.5s; margin:5px; } li a:hover{ background-color:#2196F3; color:#fff; transition:0.5s; padding:10px 50px; box-shadow: 0 10px 10px rgba(117, 120, 123, 0.3); } li a:hover:before{content:"» ";} </style> </head> <body> <ul> <li> <a href="#">خانه</a> </li> <li> <a href="#">فری لرن 1</a> </li> <li> <a href="#">فری لرن 2</a> </li> <li> <a href="#">فری لرن 3</a> </li> <li> <a href="#">فری لرن 4</a> </li> </ul> </body> </html>