Create Simple CSS Mouseover Menu

November 24, 2011 // In: CSS

Today, I’m going to show you how to create a simple CSS Mouseover Menu. Its very basic tutorial for the beginners. We’ll use simple CSS to create this menu..

Code:

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#button{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#FFFFFF;
background-color:#009999;
width: 200px;
height: 30px;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
}
#button a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#FFFFFF;
text-decoration: none;
}
#button a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#000000;
text-decoration: none;
}
#button:hover{
background-color:#00CC66;
}
#button_space{
height: 5px;
}
</style>
</head>

<body>
<table width=”200″ cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td id=”button”><a href=”#”>Home</a></td>
</tr>
<tr>
<td id=”button_space”></td>
</tr>
<tr>
<td id=”button”><a href=”#”>About us</a></td>
</tr>
<tr>
<td id=”button_space”> </td>
</tr>
<tr>
<td id=”button”><a href=”#”>Products</a></td>
</tr>
</table>
</body>
</html>

Text Effects Using CSS3
Create Rounded Corners with CSS