Tutorial: - 2
Create a Simple Menu Using Unordered List and Give them link Using Anchor Tag.
<html>
<head>
<title>Menu</title>
<style>
.d
{
background-color:black;
height:62px;
}
.menu
{
padding:4px;
margin:5px;
}
.menu li
{
list-style-type:none;
float:left;
padding:10px;
background-color:green;
width:8em;
display:block;
text-align:center;
margin-left:20px;
border: 3px solid #CCCCCC;
border-radius:10px;
}
.menu li:hover
{
background-color:gray;
}
.menu li ul li
{
color:white;
position:absolute;
left:9999px;
top:9999px;
}
.menu li:hover ul li
{
position:relative;
left:0px;
top:15px;
margin-left:-53px;
margin-top: 2px;
}
.menu li ul li:hover
{
background-color:black;
}
.menu ul.sub
{
display:none;
position:absolute;
top: 0px;
left: 126px;
}
<title>Menu</title>
<meta charset="UTF-8">
</style>
</head>
<body>
<font face="Monotype Corsiva" size="5">
<div class="d">
<ul class="menu">
<li>M1
<ul>
<li>m1.1</li>
<li>m1.2
<ul class="sub">
<li>m1.2.1</li>
<li>m1.2.2</li>
</ul>
</li>
</ul>
</li>
<li>M2
<ul>
<li>m2.1</li>
<li>m2.2</li>
</ul>
</li>
<li>M3</li>
</ul>
</div>
</font>
</body>
</html>
<head>
<title>Menu</title>
<style>
.d
{
background-color:black;
height:62px;
}
.menu
{
padding:4px;
margin:5px;
}
.menu li
{
list-style-type:none;
float:left;
padding:10px;
background-color:green;
width:8em;
display:block;
text-align:center;
margin-left:20px;
border: 3px solid #CCCCCC;
border-radius:10px;
}
.menu li:hover
{
background-color:gray;
}
.menu li ul li
{
color:white;
position:absolute;
left:9999px;
top:9999px;
}
.menu li:hover ul li
{
position:relative;
left:0px;
top:15px;
margin-left:-53px;
margin-top: 2px;
}
.menu li ul li:hover
{
background-color:black;
}
.menu ul.sub
{
display:none;
position:absolute;
top: 0px;
left: 126px;
}
<title>Menu</title>
<meta charset="UTF-8">
</style>
</head>
<body>
<font face="Monotype Corsiva" size="5">
<div class="d">
<ul class="menu">
<li>M1
<ul>
<li>m1.1</li>
<li>m1.2
<ul class="sub">
<li>m1.2.1</li>
<li>m1.2.2</li>
</ul>
</li>
</ul>
</li>
<li>M2
<ul>
<li>m2.1</li>
<li>m2.2</li>
</ul>
</li>
<li>M3</li>
</ul>
</div>
</font>
</body>
</html>
OutPut:
No comments:
Post a Comment