DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

CSS Menu With Highlights

12.12.2006
| 10611 views |
  • submit to reddit
        // Simple CSS that will let you do away with clunky images forever! This script will create a perfect menu that highlights links when the mouse rolls over! The beauty of CSS is that this script is compact, lightweight and customizeable! This is a perfect example of the power of CSS.
<a href="http://www.webscriptexpert.com/demo/css-highlight-menu.html">DEMO</a>
<a href="http://www.webscriptexpert.com">webscriptexpert.com</a>

<HTML CODE HERE>
<CODE>
<table border="0" width=175>
<tr>
<td width="100%" bgcolor="#E6E6E6"><span class="style7"><b>CSS MENU<b></span></td>
<tr>
<td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">Web Script Expert</a></span></td>
</tr>
<tr>
<td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">Actionscript</a></span></td>
</tr>
<tr>
<td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">PHP CSS</a></span></td>
</tr>
<tr>
<td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">Javascript</a></span></td>
</tr>
</table>
</CODE>


<CSS CODE HERE>
<style>
A.selector {
display: block;
width: 198px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 1px #FFFFFF;
}

A.selector:hover {
border: solid 1px #6100C1;
background-color:#F0E1FF;
}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.style7 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
</style>
    

Comments

Snippets Manager replied on Tue, 2010/06/22 - 8:32am

Demo page doesn't work