Flash Effect CSS MenuPosted on: 13 October, 2008

Flash Effect XHTML/CSS menu with mouse over effect, On mouse over bullet image change its position to produce a flash like effect.

Tested with IE7, IE6, FireFox2, Opera 8.0

Demo:
bullet bullet

To save bullets used in this menu Right Click on bullet picture and click on "Save Picture As"

HTML Code:

<ul id="mainmenu">
<li><a href="javascript:void(0);" >item one</a></li>
<li><a href="javascript:void(0);" >item two</a></li>
<li><a href="javascript:void(0);" >item three</a></li>
<li><a href="javascript:void(0);" >item four</a></li>
</ul>

CSS Code:

#mainmenu {
list-style-type:none;
padding:0;
margin:15px 8px;
}
#mainmenu li a:link, #mainmenu li a:active, #mainmenu li a:visited {
font-size:1em;
text-transform:capitalize;
display:block;
width:190px;
padding:10px 2px 2px 18px;
color:#A11010;
border-bottom:1px dashed #bbb;
background:url("images/bullet.gif") no-repeat 0 65%;
}
#mainmenu li a:hover {
color:#bbb;
text-decoration:none;
background:url("images/bullet_over.gif") no-repeat 1% 65%;
}

Leave a comment