Edit The Code:
See Result »
Try it Yourself - ©
w3ii.com
<!DOCTYPE html> <html> <head> <style> ul#menu { padding: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: black; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: orange; } </style> </head> <body> <h2>Horizontal List</h2> <ul id="menu"> <li><a href="../html/default.html">HTML</a></li> <li><a href="../css/default.html">CSS</a></li> <li><a href="../js/default.html">JavaScript</a></li> <li><a href="../php/default.html">PHP</a></li> </ul> </body> </html>