Here is an example of a fully styled vertical navigation bar:
HTML file: | Displayed by browser: |
---|---|
<style>
ul { list-style-type: none; margin: 0; padding: 0; } a:link, a:visited { display: block; font-weight: bold; color: #004000; background-color: #ffff80; width: 120px; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #ffff00; } </style> <body> <br /> <ul> <li><a href="#">Home</a></li><br /> <li><a href="#">News</a></li><br /> <li><a href="#">Contact</a></li><br /> <li><a href="#">About</a></li> </ul> </body> |
|
The <a> selector has been split into two groups on the stylesheet (link, visited and hover, active). The link's default underline has been removed (no text-decoration).