<html>
<head>
<style>
div
{
border:2px solid #00ffff;
background:#fff000;
padding:10px 40px;
width:300px;
border-radius:50px;
color:blue;
font-weight:bold;
}
ul
{
list-style-type:none;
background-color:#3333CC;
color:#fff;
border-radius:50px;
padding:10px 40px;
width:1200px;
font-weight:bold;
margin-left:30px;
}
li
{
display:inline;
width:50px;
color:#fff;
margin-left:20px;
}
ul a
{
text-decoration:none;
color:#fff;
}
ul li:hover
{
position:relative;
}
ul.submenu
{
display:none;
}
li:hover .submenu
{
display:block;
position:absolute;
left:-80px;
top:18px;
width:80px;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a>
<ul class="submenu" style="background:transparent;">
<li><div style="color:blue; width:80px"><a href="#AboutUs">About us</a></div></li>
<li><div style="color:blue; width:80px"><a href="#UsAbout us">About us</a></div></li>
<li><div style="color:blue; width:80px"><a href="#aboutUs">About us</a></div></li>
</ul>
</li><li>|</li>
<li>Contact us</li><li>|</li>
<li>Home</li><li>|</li>
<li>Home</li>
</ul>
<p style="border:2px solid #ddd; background:#fff000; padding:10px 40px; width:1200px; height:20px; border-radius:50px;">
<font style="float:left;">The border-radius property allows you to add rounded corners to elements.</font>
<font style="margin-left:100px">Hello</ >
<font style="float:right;">The border-radius property allows you to add rounded corners to elements.</font>
</p>
<div>The border-radius property allows you to add rounded corners to elements.</div>
<div>The border-radius property allows you to add rounded corners to elements.</div>
<div>The border-radius property allows you to add rounded corners to elements.</div>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
No comments:
Post a Comment
Thanks for your comment