CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. Some of those solutions focus around not only making the web prettier, but making it more accessible, and making styling accessible experiences better. I’m definitely here for it!
HTML Code:
Add the below code in body section of the HTML page.
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<div class="dropdown">
<ul>
<li><a href="#">Web Designing</a>
<div class="dropdwonmega">
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">DOT Net</a></li>
</ul>
</div>
</li>
<li><a href="#">Web Development</a></li>
</ul>
</div>
</li>
</ul>
</div>
CSS Code:
apply CSS to showcase the images in a proper position with some styles. Below is the code.
.menu{
width: 100%;
height: 45px;
background: red;
}
.menu ul li{
list-style: none;
display: inline-block;
color: #fff;
padding: 7px 15px;
line-height: 35px;
}
.menu ul li a{
color: #fff;
font-weight: bold;
font-size: 22px;
display: block;
text-decoration: none;
}
.dropdown{
display: none;
position: absolute;
background: silver;
width: 200px;
height: auto;
}
.dropdown ul li {
list-style: none;
display: block;
padding: 7px 15px;
}
.dropdown ul li:hover .dropdwonmega{
display: block;
}
.dropdown ul li a{
color: #000;
font-size: 18px;
text-decoration: none;
}
.menu ul li:hover .dropdown{
display: block
}
.dropdwonmega{
display: none;
position: absolute;
background: green;
width: 200px;
height: auto;
left: 200px;
top: 0;
}
.dropdwonmega ul li{
list-style: none;
padding: 7px 15px;
}
.dropdwonmega ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
}