Uncle Jim's JavaScript Examples
Bacis Rollover Menu using Pure CSS
Author:
Jim Stiles
This is a basic rollover menu using css instead of images.
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
SCRIPT INSTALLATION
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
<style type="text/css"> #links { padding: 0; margin: 0; position: absolute; text-align: left; width: 80px; background-color: transparent; } #links ul { list-style: none outside; padding: 0; margin : 0; background-color: #6495ed; color: #000; border-style: solid; border-color: #0000cd; border-width: 1px 1px 0px 1px; font: 10px/15px verdana; } #links ul li { padding: 0; margin: 0; border: none; } #links ul li a { display: block; padding: 4px 6px; margin: 0; background-color: #6495ed; color: #000; border-bottom: 1px #5984D4 solid; border-top: 1px #6B9FFF solid; width: 80px; text-decoration: none; } html>body #links ul li a { width: auto; } #links ul li a:hover { background-color: #d6d848; color: #000; border-bottom: 1px #BDBF3F solid; border-top: 1px #F0F250 solid; text-decoration: none; } </style>
COPY
-
Insert Inside Body: <BODY></BODY>
<div id="links"> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> <li><a href="#">item 6</a></li> <li><a href="#">item 7</a></li> <li><a href="#">item 8</a></li> <li><a href="#">item 9</a></li> <li><a href="#">item 10</a></li> </ul> </div>
Close This Window