Drop Down List in HTML
Drop down list are created by using CSS
Property of hover . Actually this is
function which performs some action whenever the mouse cursor goes on the
particular element on the web page.
You can use both the ordered list (ol) or
unordered list (ul) to get a drop down list . CSS works on layered approach.
Here I have created a simple drop down
list without any animation …
//** Code for Drop down list **//
<!DOCTYPE html>
<html>
<head>
<title>Intoduction</title>
<link
rel="stylesheet" type="text/css"
href="style/intro.css">
</head>
<body>
<header id="head"><h2>Coder99</h2></header>
<ul
class="toplist">
<li>About</li>
<li>Login</li>
<li>Navigation</li>
<li>Contact
Us
<ul>
<li>Call
Us</li><li>Message</li><li>E-mail</li>
</ul>
</li>
</ul>
</body>
</html>
Check out For Better understanding
//***** CSS file named intro.css *****//
body
{
margin:
0px;
}
#head
{
background
:black;
color:
white;
padding:
.5em;
margin-bottom:
2px;
}
.toplist
{
list-style-type:
none;
padding:
0px;
margin:
0px;
position:
fixed;
margin-left:
45.5%;
}
.toplist li
{
background-color:
green;
color:
white;
width:
7em;
padding:
.3em;
float:
right;
margin-right:
2px;
text-align:
center;
overflow:
hidden;
}
.toplist ul
{
display:
none;
}
.toplist li:hover ul
{
display:
block;
}
//** Save and enjoy coding **//
Hindi Explanation :
Hindi Explanation :
This section is covering lists only.
This section is covering Drop Down lists.
Comments
Post a Comment