How to create a simple hover menu using CSS

Thursday, April 30, 2009 · Posted in ,

This is one of the most beautiful and most amazing if you know how to manipulate your HTML and your CSS or the Cascading Style Sheet. Actually as you can see on its HTML there are no design just only pure HTML and the question is how it comes that you came on your output just like this? Easy, my answer is that I manipulate my design, structure, characteristics and effects in CSS. I use CSS to make this hover menu.

OUTPUT:
HTML:


CSS:

*
{
font-family: Tahoma;
font-size:12px;
color:#ffffff;
}
#navsite
{
position:absolute;
width: 100px;
height: 20px;
left: 79px;
top: 69px;
}
a
{
text-decoration:none;
}
#navsite ul
{
list-style:none;
padding:0px;
margin:0px;
background-color:#0066ff;

}

.lastline
{
border-bottom:1px solid #000;

}

#navsite ul li
{
display:block;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
text-align:center;

}

#navsite ul li:hover
{
display:block;
background-color:#000;
}

Powered by Blogger.