CSS Menu Simple Vertical
A simple vertical CSS menu, compatible with all major browsers, no images or javascript.
Demo:
How to use:
- Open text editor like Notepad or any other.
- Copy HTML code and paste into the text editor.
- Save file as anyname.html or anyname.htm
- Create new document.
- Copy and paste CSS code into text editor.
- Save file as menu.css
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="menu.css" /> <title>CSS Menu Simple Vertical</title> </head> <body> <div class="menu_simple"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> </body> </html>CSS code:
/* CSSTerm.com Simple CSS menu */ .menu_simple ul { margin: 0; padding: 0; width:185px; list-style-type: none; } .menu_simple ul li a { text-decoration: none; color: white; padding: 10.5px 11px; background-color: #005555; display:block; } .menu_simple ul li a:visited { color: white; } .menu_simple ul li a:hover, .menu_simple ul li .current { color: white; background-color: #5FD367; }
Previous page: CSS Vertical menu Link Expand
Next page: CSS Vertical Menu with description