<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib1e" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> < link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <h1>Lorem ipsum dolor sit amet.</hl> <div class="sticky"> <nav> <a href="">خانه</a> <a href="">وبلاگ</a> <a href="">دوره های اموزشی</a> </nav> </div> </body> </html> file style.css ul{ List-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color:dimgrey; } li{ float: right; } li a{ display: inline-block; color:snow; text-align: center; padding: 15px 17px; text-decoration: none; font-size: 25px; } li a:hover{ background-color: rgb(255,145,0); color: black; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter