Merge pull request #1105 from Aashi19234/new

Added drop-down menu on services section

index.html

@@ -58,7 +58,15 @@
                         <a class="nav-link" href="Html-files/menu.html">Menu</a>
                     </li>
                     <li class="nav-item">
+                        <!--Drop-down-->
                         <a class="nav-link" href="Html-files/services.html">Services</a>
+                    <ul class="dropdown">
+                        <li><a href="#">Ordering options</a></li>
+                        <li><a href="#">Order Tracking</a></li>
+                        <li><a href="#">Customer Support</a></li>
+                        <li><a href="#">FAQS</a></li>
+
+                    </ul>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="Html-files/contact.html">Contact Us</a>

style.css

@@ -718,4 +718,45 @@ body{
 
 .summery:hover {
   cursor: pointer;
-}
+}
+
+/*Drop down*/
+ul li ul.dropdown {
+  width: auto;
+  background: #000; /* Black background */
+  position: absolute;
+  z-index: 999;
+  display: none;
+  padding: 10px 0;
+  border-radius: 4px; /* Rounded corners */
+}
+
+/* Show dropdown menu on hover */
+.nav-link:focus {
+    outline: none;
+}
+ul li:hover ul.dropdown {
+  display: block;
+}
+
+/* Dropdown menu item styling */
+ul li ul.dropdown li {
+  display: block;
+  background: #000; /* Black background */
+  margin: 2px 0;
+}
+
+ul li ul.dropdown li a {
+  display: block;
+  padding: 10px 20px;
+  text-decoration: none;
+  color: #fff; /* White font color */
+  white-space: nowrap; /* Prevent text wrapping */
+}
+
+ul li ul.dropdown li a:hover {
+  background: #ff0000; /* Red background on hover */
+  color: #fff; /* Ensure font color remains white */
+}
+
+/* Optional: styling for active links */