Activate a large sub menu upon hover starting from the first `li` using CSS

I have an issue with the menu on my website. The main menu is working fine, but the sub-menu does not start from the first list item, which is needed for it to function as a Mega menu.

I attempted to fix this by adding the following code:

#ayurmenu ul li:hover > ul {
  left: 0px;
}

However, this solution did not work. You can view the JSFiddle link below to see the issue.

JS Fiddle here for Menu

PS: In addition, for the "About Us" section, the sub-menu should also start from the same list item, rather than the first one.

htmlcssmenu

Answer №1

It is important that the li elements within the main navigation menu (such as Home, Home Remedies, etc) do not have a relative positioning (position:relative;) in relation to their parent ul.

To ensure proper alignment, these li elements should be set to static. If you wish for the sub menu li elements to have a relative position, that can be arranged separately. However, to maintain a leftward push under the first li element, it is necessary for the top level li elements to remain static.

View the code example here

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

Having trouble aligning the divs

I am currently attempting to align 3 divs next to each other on my webpage, and while I have made some progress, I am running into an issue with setting the width based on a percentage of the screen. When I try to make the total width of all three divs add ...

htmltwitter-bootstrap

Customize the color of text in the ActionBarSherlock menu on Android

I am looking to update the white text color to orange. Here is an illustration. ...

androidmenuandroid-actionbaractionbarsherlocksubmenu

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

jquerycsscss-transitionsmodernizr

Ways to evenly distribute divs into rows

Greetings if this question has already been inquired about, but my search turned up nothing quite like it. My current setup is as follows: .main{ display: inline-flex; flex-direction: row; } <div class = "main"> <div class="sub-div ...

htmlcssflexbox

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

Incorporating both an href link and PHP code using a single click event on a submit button

After exploring various forums, I am still struggling to solve this issue. Can someone please assist me in understanding how to achieve this? When I click the submit button, it currently directs me to a file location via a link without any issues. Howeve ...

phphtmlmysql

Utilize a jQuery button to horizontally align text with ellipsis

I am currently struggling to align some text with ellipsis horizontally alongside a jquery button and I cannot seem to determine the reason for this issue. You can view my problem on jsfiddle: http://jsfiddle.net/5bVDu/ <span> <span id=&apo ...

jqueryhtmlcssjquery-uivertical-alignment

How to Exclude ress.css in Vuetify.js

How can I prevent ress.css from conflicting with Bootstrap and my custom styles in Vuetify? I attempted to remove it from the Vuetify directory within node_modules, but that did not resolve the issue. ...

javascriptcsslaravelnpmvuetify.js

Generating image alt tags based on the page title in real-time using PHP

Is there a way to automatically generate image alt text using the current page title in PHP? I am working on a website called and there are too many images to manually fill in alt text for each one. Thank you, Ricky ...

phphtml

Tips for customizing your MUI slider design

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

javascriptcssreactjsmaterial-ui

center text vertically in HTML list

Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure: <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="index.html"><i ...

htmlcsstwitter-bootstrap

When switching from JavaScript to jQuery, the button values become invisible

Currently, I have a functional app that can dynamically change the values of buttons based on user input. The current implementation is in vanilla JavaScript within the script.js file. However, I am looking to enhance the functionality and user experience ...

javascriptjqueryhtmlcssajax

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

javascripthtmlcsshtml5-canvas

What is the best way to decrease the width of one of the four columns?

I trust all is well with you. I'm having trouble adjusting the width of one of my table data cells. In the image attached below, you'll notice that my + icon is the same size as the other columns. I'd like to make it much narrower and posit ...

htmlcss

The HTML document is experiencing overflow within the body element

I am in the process of designing a website that consists of two main sections. The first section includes a video, a navigation bar, and some introductory text. The second section features an image and a lorem ipsum paragraph. However, these two parts are ...

htmlcssvideo

Retrieve the data from the database using PHP and showcase it within the HTML code

Having an issue with my system, I tried following a tutorial on YouTube and made some modifications to the code. Here is what I have: <label>Department</label> <select> <?php include 'php/connect.php'; ...

phphtml

Perform calculations using the provided input values or null values in Javascript/Jquery

I'm a beginner in Javascript and JQuery. Take a look at my code that calculates an average (A) value based on three input values. https://i.sstatic.net/teGkc.png Check out the JQuery snippet below: $(".q-value, .e-value, .t-value").click(f ...

javascripthtmljquery

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

htmlcss

Enhancing Option Element Height with Padding in Bootstrap 5

Is there a way to adjust the height or increase padding of the option element within a standard select box using Bootstrap 5? More information can be found at: https://getbootstrap.com/docs/5.0/forms/select/ Could you provide an example code to demonstrat ...

cssbootstrap-5

Hover effect exclusively for specific child elements

Applying a hover effect to all divs inside a well can be done using the following code: .well:hover div { background-color:green } However, if you only want to apply the hover effect to specific divs inside the well, you can specify them in this way: ...

htmlcss