CSS Vertical Menu

CSS

Click in form to highlight code and copy with <ctrl>+<c> to clipboard.

<style type="text/css"> <!-- #sidebar { } #sidebar ul { width: 180px; border-top: 1px solid #069; margin: 0; padding: 0; list-style: none; } #sidebar li a { font: normal 13px Arial, Helvetica, sans-serif; padding: 5px; color: #069; text-decoration: none; border-bottom: 1px solid #069; display: block; width: 100%; } #sidebar li a:hover { color: #fff; background: #609ebf; } #sidebar li.current a { color: #fff; background: #069; } #sidebar li.caption { display: block; } html>body #sidebar li a { width: auto; } --> </style>

HTML

Click in form to highlight code and copy with <ctrl>+<c> to clipboard.

<div id="sidebar"> <ul> <li><a href="#sitename" title="Sitename">Page 1</a></li> <li><a href="#sitename" title="Sitename">Page 2</a></li> <li><a href="#sitename" title="Sitename">Page 3</a></li> <li><a href="#sitename" title="Sitename">Page 4</a></li> <li><a href="#sitename" title="Sitename">Page 5</a></li> </ul> </div>