I've tried to hide the sub-menu initially using display:none in CSS, and then show it using display: block on hover. However, for some reason,

I have set the sub-menu to be hidden with display: none, and it should show on hover with display: block, but for some reason, it's not working as expected.

To make the sub-menu appear when hovering over main-menu-link, you can use the following HTML and CSS:

.main-menu-link:link,
.main-menu-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-menu-link:hover,
.main-menu-link:active {
  color: #e67e22;
}

.sub-menu {
  list-style: none;
  position: absolute;
  width: 12%;
  line-height: 1.5;
  padding-top: 1rem;
  display: none; /* hiding the sub menu */
  background-color: #ddd;
}

.main-menu-link:hover .sub-menu {
  display: block; /* showing the sub menu on hover */
}
<nav class="main-nav">
  <ul class="main-nav-list">
    <li><a class="main-nav-link" href="#introduction">Introduction</a></li>
    <li><a class="main-nav-link" href="#product">Product</a></li>
    <li>
      <a class="main-menu-link" href="#">Facilities & processing</a>
      <ul class="sub-menu">
        <li><a class="sub-menu-link" href="#facilities">Facilities</a></li>
          <li><a class="sub-menu-link" href="#processing">Processing </a></li>
      </ul>

      </li>
      <li><a class="main-nav-link" href="#processing">Processing </a></li>
      <li><a class="main-nav-link" href="#procurement-sales">Procurment & Sales</a></li>

htmlcss

Answer №1

Enhance the li tag by adding a class and implementing hover effects.

.main-menu-link:link,
.main-menu-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-menu-link:hover,
.main-menu-link:active {
  color: #e67e22;
}

.sub-menu {
  /* background-color: red; */
  list-style: none;
  position: absolute;
  width: 12%;
  line-height: 1.5;
  padding-top: 1rem;
  /* ensure sub menu is hidden initially */
  display: none;
  background-color: #ddd;
}

.dropdown:hover .sub-menu {
  display: block;
}
<nav class="main-nav">
  <ul class="main-nav-list">
    <li><a class="main-nav-link" href="#introduction">Introduction</a></li>
    <li><a class="main-nav-link" href="#product">Product</a></li>
    <li class="dropdown">
      <a class="main-menu-link" href="#">Facilities & processing</a>
      <ul class="sub-menu">
        <li><a class="sub-menu-link" href="#facilities">Facilities</a>
          <li><a class="sub-menu-link" href="#processing">Processing </a></li>
      </ul>

      </li>
      <li><a class="main-nav-link" href="#processing">Processing </a></li>
      <li><a class="main-nav-link" href="#procurement-sales">Procurment & Sales</a></li>
  </ul>
</nav>

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

Troubleshooting the Angular 7 mat-select issue caused by the "ellipsis" CSS property with three dots

I am facing an issue with a mat-select property called "ellipsis". The three points appear in a different color than the text itself. I attempted to change it to white using the following code, but the dots still remain black. ::ngdeep .example{ ...

htmlcssangularangular-material

Creating adaptable HTML images by specifying width and height attributes within the image tag

My current website setup involves loading a full image and automatically adjusting its size to fit the screen by setting the image width to 100% in CSS. While this method works smoothly, it may not be following standards as I am not specifying width and he ...

javascripthtmlsizescreen-resolutionresponsive-images

Issues with Ajax response causing PHP and HTML submit button to not function properly

When I have an input on my webpage that is linked with AJAX, it searches for a name in the database and returns the result as an HTML form with values from the database. However, the submit button within the form is not functioning properly. Here is a sni ...

phpjqueryhtmlajaxsubmit

Reversing the order of images on overlapping canvas

When I utilize the following code to draw on my HTML5 canvas: <canvas id="game">Your browser can't use canvas</canvas> <script> var canvas = document.getElementById('game'); var ctx = canvas.getContext('2d'); var ...

javascripthtmlimagehtml5-canvas

An error message pops up when using Next.js with Sass, indicating that a suitable loader is required to handle this file type

I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work. I double-checked my setup for compiling SCSS files, but the error message keeps popping up: /scss/style.scss 1:0 Module parse f ...

javascriptcsssassnext.js

JavaScript Mobile Redirect HTML

Despite numerous attempts, I have been unable to get the mobiledetector script to function as desired for my mobile viewers. My goal is to include a link on the mobile site that allows users to access the full site without being redirected back to the mobi ...

javascripthtmlhttp-redirectmobilecookies

Having an issue where the Jquery clone function is only duplicating the content once. Looking to

I'm currently working on existing HTML table code. My goal is to copy the text from the 'th' header rows and paste them inside the corresponding td cells for each subsequent row. While I have successfully managed to copy the header row, it o ...

javascripthtmljquerycss

How can Python be used to change the read-only status of an HTML input element using Selenium

Currently, I am attempting to utilize Selenium to clear a text field that is within a 'read only' input field. Despite not encountering any errors in this portion of the code, it does not yield the desired outcome: from selenium.webdriver.common ...

pythonhtmlseleniumselenium-webdriversendkeys

Customizing the Height of Elements in Bootstrap

When working with two columns in bootstrap, let's say one column has a height of 800 PX. If you want the text in the second column to start after 200 PX, is there a way to achieve this without using padding or margin? Are there any predefined classes ...

htmlcssweblayoutbootstrap-4

Apply a CSS class to the header cells

I'm facing a challenge with adding a CssClass to a table that is generated automatically through C#. The table creation code looks like this: TableHeaderRow header = new TableHeaderRow(); cell1 = new TableCell { Text = "Brand" }; cell2 = new TableCel ...

c#css

Steps for creating a CSS-only tooltip for a group of paths within an SVG element

Looking for help on adding a CSS-only tooltip to an SVG map on my WordPress website. The tooltip should appear when hovering over countries with the class st0 and display information from the data-info attribute of each country's path in the SVG. Here ...

htmlcsssvg

What is causing the issue with the minlength and maxlength validations not functioning correctly?

I am currently working with AngularJS and HTML to write code. I am facing an issue where the minlength and maxlength validations are not functioning properly in my code. Below is a snippet of my HTML code: <input type="text" id="healthcomplaint" ng-m ...

javascripthtmlangularjs

Tips on changing font color within an email body in Outlook using a C#.NET Windows application

While working on a c#.net windows application, I encountered an issue with setting font color for specific lines in the email body when sending mail to Outlook. Despite trying various methods, I was unable to find a solution. Below is a snippet of my code: ...

c#htmlfontsoutlook

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

cssangularoverlay

Guide on linking an id with a trigger function in HTML and JavaScript

In the snippet below, I aim to create a responsive feature based on user input of 'mute' and 'muteon'. Whenever one of these is entered into the textbox, it will change the color of linked elements with the IDs "text" and "text1" to red ...

javascripthtmlcsstelnet

Is there a way to implement a floating menu for individual rows in ag-Grid?

Looking to implement a menu that pops up when a user hovers over a row, similar to the image below. https://i.sstatic.net/wISmX.png I searched for a pre-built solution without any luck. I also attempted to use a custom CellRenderer function to create a mo ...

htmlangularag-grid

A particular individual experiencing difficulties executing a script within an HTML form that relies on google.script.run.function()

I've developed an input form that operates within an HTML modal launched from a Google Apps Script in a Google Sheet. This form retrieves values from the sheet, allows users to edit or manipulate them, and then writes the changes back into the sheet u ...

javascripthtmlgoogle-apps-scriptgoogle-sheetsmodal-dialog

Unexpected Error: Null value prevents accessing 'getElementsByClassName' property in HTML, along with Troubleshooting Inactive Button Behavior in HTML

Can someone identify the error in my HTML code? I keep getting an "Uncaught TypeError: Cannot read property 'getElementsByClassName' of null" error on the second line of the script tag. Additionally, my implemented active header code is not funct ...

javascripthtmlcss

Jquery problems impacting every element rather than only one

I'm currently experimenting with a small project where I have multiple div elements containing an image, h1 tag, and p tag all sharing the same class name. My goal is to add CSS effects that make the h1 tag and p tag slide into view and become visible ...

jquerycss

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

htmlcsstreeview