Q.No. 10 - Design Drop Down Navigation Menu with following specification: - When the user moves the mouse over an element inside a navigation bar then dropdown menu will appear. A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

Previous year question

Sol.- 

HTML Code :-
<html>
<head>
	<title>Navigation Bar- Examcomp</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
	<ul>
		<li><a href="#">FILE</a>
			<ul class="ho">
				<li><a href="#">NEW FILE</a></li>
				<li><a href="#">OPEN FILE</a></li>
				<li><a href="#">SAVE FILE</a></li>
			</ul>
		</li>
		<li><a href="#">EDIT</a>
			<ul class="ho">
				<li><a href="#">CUT</a></li>
				<li><a href="#">UNDO</a></li>
				<li><a href="#">REDO</a></li>
			</ul>
		</li>
		<li><a href="#">SELECTION</a>
			<ul class="ho">
				<li><a href="#">SPLIT</a></li>
				<li><a href="#">EXPAND</a></li>
				<li><a href="#">CUSTOM</a></li>
			</ul>
		</li>
		<li><a href="#">FIND</a></li>
		<li><a href="#">VIEW</a></li>
	</ul>
</nav>
</body>
</html>


Now CSS ( style.css) -
nav{
	background: lightgrey;
}
nav ul{
	list-style-type: none;
	display: flex;
    padding: 0;
}
nav ul a{
	text-decoration: none;
	text-align: center;
}
nav ul li{
	padding: 10px 30px;
}
nav ul li:hover{
	background-color: grey;
}
nav ul li:hover a{
	color: white;
}
.ho{
	display: none;
	position: absolute	;
	background: grey;
	top: 40px;

}
nav ul li:hover .ho{
	display: flex;
	flex-direction: column;
}
.ho li:hover {
	background: lightgrey;

}
.ho li:hover a{
	color: black;
}

OUTPUT: