css, align top menu

Is it possible to achieve this using only CSS?

Please take a look at my example here.

Currently, when I hover over the menu, the submenu appears next to it.

I would like to align all submenus' tops with the top of the second level menu.

--------------------------------------------------
|                                                |
|                                                |
--------------------------------------------------
|         |              |  <- Second one is selected
|/////////|              |  <- Top matches first submenu top
|         |              |  
----------|              |
          |              |
          |              |
          ----------------

Thank you for your advice!

htmlcssmenuhover

Answer №1

It's actually quite simple. All you need to do is delete the position relative from the submenu list items. You can view the revised fiddle here:

.MM ul ul li {
   position:static;
}

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

Using Javascript to display a Div element for a short period of time when the mouse is clicked

Having some trouble creating a hidden colored block that appears after a mouse press anywhere on the page, stays visible for 2 seconds, and then disappears until another mouse press triggers it again. I've tried using '.click(function' and o ...

javascriptjqueryhtmlcss

Manipulate text within a text area using jQuery

Good afternoon. How can I use JavaScript to update the text in a textarea input? I currently have some content in my textarea that includes a PublisherImprintName tag, and I want to remove it using jQuery. <PublisherInfo> <PublisherName>A ...

javascriptjqueryhtml

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...

javascripthtmljquery

Interested in learning how to code games using JavaScript?

Hi everyone, I'm currently exploring the world of Javascript and have been tasked with completing a game for a class project. The game involves a truck that must catch falling kiwis while only being able to move left or right. A timer is set for two m ...

javascripthtml

What steps can I take to make the cards in bootstrap 5.3 responsive for mobile devices?

I'm struggling with my code and need some help. I've been editing it, but things seem to be getting worse instead of better. Specifically, I can't figure out how to set up my container, row, and columns in Bootstrap properly. My site uses ca ...

htmlcsssassbootstrap-5responsive-images

What could be the reason my vue.js button is not generating a fresh textarea?

I am currently developing my first Web App with vue.js and I'm trying to implement a feature where clicking a button will generate a new textarea. It seemed to be functioning correctly when tested on jsfiddle, but once I tried running it in visual stu ...

javascripthtmlvue.js

The submission of the form is not functioning properly after loading the page using AJAX

Having trouble submitting my form after loading the page with ajax. Here is the code I am using to load the page: The problem occurs after loading the ajax form as a modalbox. function account_list(url) { $.ajax({ type: 'get', url: url, befor ...

javascriptjqueryhtmlajax

Deleting a field from a Django model form causes the HTML layout to be disrupted

When I remove the "useremail" field from my forms.py in Django, it causes the formatting to be removed from all fields in the HTML, even though the form functions correctly. This issue occurs when I remove any of the 4 fields. All forms work fine, but the ...

htmldjangodjango-modelsdjango-forms

Addressing rendering problems in Ag-GRID when used with Angular

I'm facing a perplexing issue where the ag-grid table in my Angular 12 / Bootstrap 5 application renders with a height of 0px. Below is the link to the rendered table: rendered table Upon inspecting with Chrome's debug tool, I noticed that the ...

htmlcssangularbootstrap-5ag-grid

What is the method for creating a HTML test report using Python incorporated into my code?

from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...

pythonhtmltestingreport

Creating a slanted polygon div that adjusts to different screen sizes: a step-by-step

Looking to create a slanted and responsive div similar to the example image provided. Any assistance would be greatly appreciated. ...

htmlcssbootstrap-4

What is the best way to create a dropdown menu that smoothly slides in from the bottom of the screen?

Is it possible to create dropdown menus in the navigation bar that slide in from the bottom with a smooth transition effect, similar to this example: Although I am working on building my own template, so my code may differ from the original theme. Here is ...

javascripthtmlcss

Opening a new tab in Angular 6 from a component with freshly generated HTML (containing input data)

Hello everyone. I have a requirement where I need to open a new browser tab with formatted input data from a modal component. Here's an example code snippet that attempts to achieve this using ng-template: @Component({ template: '< ...

htmlangulartypescript

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button). He ...

javascriptcssreactjsreact-nativereact-redux

I am looking to extract the content of the title within an HTML table

Check out my code snippet below: <td class="text-left"><div class="ettn" data-toggle="tooltip" title="7f5e5b03-7d30-4001-acd9-c993d6c24301">ETTN</div></td> I am looking to extract the value ...

javascripthtml

Utilizing Multiple Components on a Single Page in React.js

I'm currently setting up a React main page that renders two separate components - Header and Test. render() { return ( <Header /> <Test /> ); } The Header component contains static content, while the ...

javascripthtmlreactjsredux

What causes two elements with display: inline-block; position: absolute; to overlap instead of appearing side by side?

It is recommended to use position: relative; in order to achieve inline block behavior for both elements and prevent them from overlapping. This positions the elements inline next to each other as they are recognized as blocks. When using position: absolu ...

htmlcsscss-position

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

I am faced with a challenge involving two child elements of fixed size: <div class="parent"> <div class="static_child"> </div> <div class="static_child"> </div> </div> .parent { border: 1px solid black; dis ...

javascriptandroidhtmlioscss

The click event listener only seems to fire on the second attempt

This block of code is designed to function as a search algorithm that also provides keyword suggestions. When a user clicks on a keyword, it is supposed to be placed into an input textbox. The possible keywords are "first" and "second". However, there is ...

javascripthtmljqueryeventsjquery-events

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

javascriptjqueryhtmlcss