Styling and structuring your website with CSS and HTML

I am coding an HTML page where I've incorporated CSS for the styling. However, I'm facing an issue with the drop-down menu. Whenever I try to click on a drop-down option, it disappears. How can I fix this?

I want the drop-down options to be clickable, organized in categories, and function properly. What am I missing in my code?

#mid ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}

/*Creating a horizontal list with spacing*/

#mid li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}

/*Styling the menu links*/

#mid li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}

/*Hover effect for top-level links*/

#mid li:hover a {
  background: #19c589;
}

/*Styling for drop-down links*/

#mid li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}

/*Hover effect for drop-down links*/

#mid li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}

/*Hiding the dropdown links initially*/

#mid li ul {
  display: none;
}

/*Making the drop-down links vertical*/

#mid li ul li {
  display: block;
  float: none;
}

/*Preventing text wrapping*/

#mid li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}

/*Displaying the dropdown on hover*/

#mid ul li a:hover+.hidden,
.hidden:hover {
  display: block;
}

/*Styling the 'show menu' label button and hiding it by default*/

#mid .show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}

/*Hiding the checkbox*/

#mid input[type=checkbox] {
  display: none;
}

/*Showing the menu when the invisible checkbox is checked*/

#mid input[type=checkbox]:checked~#menu {
  display: block;
}
<div id="mid">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Categories ↓</a>
      <ul class="hidden">
        <li><a href="#">Engineering </a></li>
        <li><a href="#">MBA</a></li>
        <li><a href="#">AGRICULTURE</a></li>
        <li><a href="#">ARCHITECTURE</a></li>
        <li><a href="#">Commerce</a></li>
        <li><a href="#">Science</a></li>
        <li><a href="#">PHD</a></li>
        <li><a href="#">Other Branches</a></li>
      </ul>
    </li>
    <li><a href="#">NOVELS</a>
    </li>
    <li><a href="#">News Updates</a></li>
    <li>
      <a href="#">Follow us ↓ </a>
      <ul class="hidden">
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Instagram</a></li>
        <li><a href="#">Twitter</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us ↓ </a>
      <ul class="hidden">
        <li><a href="#">ADVERTISEMENT</a></li>
        <li><a href="#">Report Bug</a></li>
      </ul>
    </li>
  </ul>
</div>

</html>

Answer №1

Include this

#menu li:hover > ul{
  display: block;
}

By adding this code, the menu will remain visible when hovering over its parent li

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to change the input type=file value?

What is the best method for customizing a file upload using input type="file" in HTML? Here is an example of what I am trying to achieve: <form enctype="multipart/form-data" action="xmlupload" method="post" name="form1" id="form1"> <input type ...

Adding hyperlinks to images on a Project Page in Squarespace with the help of JQuery

I'm currently creating a website on Squarespace and facing a challenge with the project pages. While Squarespace allows me to add images with titles and descriptions, I do not have direct access to edit the page. Unfortunately, the platform does not h ...

The grid images transition at set intervals using jQuery or another JavaScript framework

I am facing a challenge with developing an image grid that transitions some images at random intervals using either jQuery or another method in JavaScript. It's important to note that I don't want all the images to change simultaneously; each gro ...

What is the simplest way to shift an icon to the right in the header of an Expansion panel using Vuetify

After implementing the template from this example: https://vuetifyjs.com/en/components/expansion-panels/#usage I am facing an issue where the header icon is stuck to the title Even applying "float: right;" does not seem to resolve it Has anyone els ...

What is the best method for showcasing two images side by side in a column layout?

I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth. Img1 Img2 Img3 Img4 This is my code: <section id="content"> <div class="content-wrap"> <div class="container clearfix "& ...

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

Using mix-blend-mode with an SVG image within a colored <div>: tips for applying it to the background color of your HTML

I am facing an issue with a SVG file that has mix-blend-mode styles defined on certain elements. The blending is working properly for the elements inside the SVG, but not for the background color of the HTML <div>. For instance: <!doctype html> ...

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...

Using data variables as arguments in the style section of Vue2

Suppose we have a data variable and I want to utilize this data variable for styling purposes. data() { return{ selected:{ index: 2 } } } <style> .parent-table >>> .table-row:nth-child(/* here I intend to use ...

Achieving full-width container on mobile devices with Bootstrap

Despite my efforts in the CSS file, I am still struggling to get the container to take up the full width on mobile devices. Here is my CSS code: @media (max-device-width: 1024px) { .col-sm-2{ width: 100%; } .container { margin: 0 auto; width: ...

Update the button text dynamically when clicked without using an identifier or a class

If we take a look at my button in the following code: <input type="button" value="BLUE" name="button_blue" /> My goal is to have the value="BLUE" changed to value="RED" or any other desired value when the button is clicked. ...

Using antd icons in CSS pseudo-elements effectively involves leveraging the ::before or ::after

Currently, I have an icon displaying like this: import { Icon } from "antd"; ... // within a react component: <div className="someclass"> <Icon type="thunderbolt" /> </div> What I really aim to achieve i ...

Seeking help on modfiying div content with AJAX - any tips for showing navigation using hash or anchor?

Looking to create a dynamic page that updates content within a div asynchronously while also providing users with direct access to specific content within the div by using anchors (e.g. www.website.co.uk/#page1). I've successfully implemented the upd ...

Internet Explorer 8 is causing alignment problems with sidebars on certain websites within a Wordpress multisite setup

I am managing a Wordpress multisite setup with the following websites: The main portal: which connects to The issue arises on all pages of gprgebouw.nl and gpradvies.nl but not on the other domains. Attached is a screenshot of the homepage of gprgebouw. ...

Preventing Click Events from Firing During Drag in JavaScript

I have implemented a code for dragging containers left or right, which is functioning properly. Users can also click on the "thumb". However, I am facing an issue where a click event occurs even after dragging. I want to ensure that only either drag or cli ...

Customize border color for a single cell in a table using Bootstrap 4

I'm facing an issue where I'm trying to apply a red border color to a specific cell, but it's not appearing on the top and left sides of the cell. It seems like the border color of other cells is taking precedence over the one I'm tryin ...

"Struggling to horizontally center a div with a fixed width in CSS - what am I

Whenever I try to use it on my browser, the content shifts to the left and I can't seem to center it using text-align or flexbox. The issue gets resolved when I remove the width property, but I really need it to have that paragraph-style look I'm ...

Updating the background image for a radio button

Is it possible to customize the background image within the active radio button from the default redmond to aristo? .ui-radiobutton-icon { background-image: url("/images/ui-icons_38667f_256x240.png.jsf"); } Can someone help with the correct syntax for t ...

Using Express and Node.js to implement the Google Maps API

Currently working on creating a simple web application using the Google Maps API with express/node. At the moment, I have three main files that make up my project: server.js const express = require('express'); const bodyParser = require(' ...

An incessant stream of onclick events is being triggered

My HTML code consists of a jQuery script and a button that triggers a function to display random answers. However, after clicking the button once, the answers cycle automatically without any input. I want each click to show a different answer. What could ...