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:
![](pr210o.png)