computergeek67 Administrator Joined: 31 Jul 2007 Posts: 144 Tokens: 147 Location: US
Posted: Sat Oct 20, 2007 4:40 pm Post subject: Rollover Menu in CSS
With this tutorial, you can create a very clean rollover menu that you can use in your website.
First, let's establish the links. Here is the code:
Code: <div id="nav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
You can change the # with the URL of your choice.
Now for the main code:
Code: #nav {
width: 200px;
background-color: #0099CC;
}
#nav a:link, #nav a:visited{
color: #33FFFF;
text-decoration: none;
background-color: #006699;
display: block;
padding: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 1px;
width: 190px; }
#nav a:hover{
color: #FFFFCC;
background-color: #003366;
}
_________________
Come to me if you have any questions