Design DROPDOWN MENU using HTML and CSS - DEEP CODER

Breaking

printf("Learn Deep Coding Here!!");

Design DROPDOWN MENU using HTML and CSS


 
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu</title>
<style type="text/css">
#box ul
{
list-style: none;
}
#box ul li
{
background-color: black;
float: left;
color: white;
width: 100px;
height: 25px;
text-align: center;
font-family: calibri;
padding: 2px;
position: relative;
}
#box ul ul
{
display: none;
padding-left: 0px;
}
#box ul li:hover > ul
{
display: block;
}
#box ul ul li
{
text-align: center;
}
#box ul ul ul
{
position: absolute;
margin-left: 95px;
top: 0px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>Student1
<ul>
<li>Level1</li>
<li>Level2
<ul>
<li>Ali</li>
<li>Jawad</li>
<li>Khan</li>
</ul>
</li>
<li>Level3</li>
</ul>
</li>
<li>Student2</li>
<li>Student3</li>
<li>Student4</li>
</ul>
</div>
</body>
</html>

No comments:

Post a Comment