Hello friends.... How are you .. I hope you all are fine. Today I am going to tell you how to make your website or blogs more attractive by using html and css .
html code save with .html format and css code save with .css format in notepad.
html code save with .html format and css code save with .css format in notepad.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>
think different
</title>
<link rel="stylesheet" type="text/css" href="think.css" />
</head>
<body>
<div id="new">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THINK DIFFERENT</a>
<ul>
<li><a href="#">Think Different 1</a></li>
<li><a href="#">Think Different 2</a></li>
<li><a href="#">Think Different 3</a></li>
<li><a href="#">Think Different 4</a></li>
<li><a href="#">Think Different 5</a></li>
</ul></li>
<li><a href="#">ABOUT US</a></li>
</ul></div></body></html>
</title>
<link rel="stylesheet" type="text/css" href="think.css" />
</head>
<body>
<div id="new">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THINK DIFFERENT</a>
<ul>
<li><a href="#">Think Different 1</a></li>
<li><a href="#">Think Different 2</a></li>
<li><a href="#">Think Different 3</a></li>
<li><a href="#">Think Different 4</a></li>
<li><a href="#">Think Different 5</a></li>
</ul></li>
<li><a href="#">ABOUT US</a></li>
</ul></div></body></html>
CSS code:
body
{
background:#C5EFA9;
}
#new
{
margin:0px;
padding:0px;
}
#new ul
{
margin:0px;
padding:0px;
}
#new li
{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
background:#CCC;
}
#new ul li a
{
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#039;
border: 1px solid #000;
text-shadow:1px 1px 1px #000000;
}
#new ul ul
{
visibility:hidden;
position:absolute;
top:30px;
}
#new ul li:hover ul
{
visibility:visible;
}
#new li:hover
{
background:#F6C;
}
#new li:hover
{
color:#6C6;
}
{
background:#C5EFA9;
}
#new
{
margin:0px;
padding:0px;
}
#new ul
{
margin:0px;
padding:0px;
}
#new li
{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
background:#CCC;
}
#new ul li a
{
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#039;
border: 1px solid #000;
text-shadow:1px 1px 1px #000000;
}
#new ul ul
{
visibility:hidden;
position:absolute;
top:30px;
}
#new ul li:hover ul
{
visibility:visible;
}
#new li:hover
{
background:#F6C;
}
#new li:hover
{
color:#6C6;
}
After mouse hover on THINK DIFFERENT
Thanks... please comment if you like this....
