<html>
<head>
<title>Dropdown Menus</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menus {
list-style:none;
width: 100%;
background: #f4c400;
display: flex;
font-family: Arial, sans-serif;
font-size: 19px;
}
.menus > li {
position: relative;
}
.menus a {
display: block;
padding: 15px 25px;
color: #000;
text-decoration: none;
font-weight: bold;
white-space: nowrap;
}
.menus a:hover {
background: #000;
color: #fff;
}
.dropdown-menu {
position: absolute;
top: 100%;
list-style: none;
left: 0;
background: #f4c400;
display: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-menu li a
{
padding: 12px 15px;
color: #333;
font-weight: normal;
}
.dropdown-menu li a:hover
{
background: #f4c400;
color: #e80909;
}
</style>
</head>
<body>
<ul class="menus">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li class="dropdown"><a href="services.html">Services</a>
<ul class="dropdown-menu">
<li><a href="webdesign.html">Web Design</a></li>
<li><a href="webdevelopment.html">Web Development</a></li>
<li><a href="digitalmarketing.html">Digital Marketing</a></li>
<li><a href="mobileapps.html">Mobile Apps</a> </li>
<li><a href="softwaredevelopment.html">Software Development</a></li>
</ul>
</li>
<li><a href="latestnews.html">Latest News </a></li>
<li><a href="Login.html">Login </a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</body>
</html>
Leave a Comment