When hovering over the menu, the sub-menu is displayed and the content slides downwards. Is there a way to prevent the content from sliding down and have the sub-menu overlap the

When the main menu is hovered over, a sub-menu appears and the content below the main menu slides down. Check out the code snippet below:

HTML:

<div id="holderDiv">
   <div id="menu">
      <a href="#" id="items">Menu 1</a>
   </div>   
   <div id="submenu" style="height:100px;background:green;">
      <a href="#">Sub Menu 1</a>
      <a href="#">Sub Menu 2</a>
      <a href="#">Sub Menu 3</a>
   </div>
</div>
<div style="height:500px;background:red;text-align:center">Content</div>

Javascript:

$("#submenu").hide();

$("#menu").on('mouseover', function () {
     $("#submenu").slideDown(500);
});

$("#holderDiv").on('mouseleave', function () {
       $("#submenu").slideUp(500);
});

Check it out on jsfiddle : http://jsfiddle.net/YKKrM/1/

htmlcss

Answer №1

Is this what you're looking for? SEE DEMO

Additional code I included: 

#submenu {
    position:absolute;
    width: 100%;
}

Answer №2

Adding position absolute to #subDiv should do the trick, causing #subDiv to overlap the content Div.

#submenu{
    position:absolute;
    width:90%;
    padding:20px 20px 0 20px;
}

Check out the demo here

Answer №3

Your fiddle has been updated to include the following changes: http://jsfiddle.net/YKKrM/5/

I have included the code style="position: relative;" in your holderDiv, and position: absolute; width: 100%; in the submenu style.

Here is the revised html:

<div id="holderDiv" style="position: relative;">
    <div id="menu">
        <a href="#" id="items">Menu 1</a>
    </div>
   <div id="submenu" style="height:100px;background:green;position: absolute; width: 100%">
        <a href="#">Sub Menu 1</a>
        <a href="#">Sub Menu 2</a>
        <a href="#">Sub Menu 3</a>
    </div>
    </div>
<div style="height:500px;background:red;text-align:center">Content</div>

Suggestion: It is recommended to use css classes instead of inline styles for better organization.

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

Steps for filling an HTML table within a dynamically loaded DIV

I have a container in my HTML page where I dynamically load other pages using the jQuery.load() function. One of the pages requires me to populate a table from the database just after/before it loads. How can I trigger a JavaScript function to execute righ ...

javascriptjqueryhtml

Tracking changes in real time and calculating the sum with AJAX, PHP, and MySQL for efficient processing

Initially, I kindly request you to read this until the end. I am in dire need of assistance with my problem as I have searched for solutions but still remain clueless. https://i.sstatic.net/DAb1q.png Referring to the image provided, the first 'Produ ...

javascriptphphtmljqueryajax

Code for switching between accordion panels with a simple button press

I took some code snippets from a website and developed a shopping cart accordion module. The complete code is available on my CodePen profile, you can access it through this link: http://codepen.io/applecool/pen/YXaJLa <div class="summary"> <but ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error: Unable to execute $(...).stellar since it is not a recognized function

Having some trouble implementing the stellar plugin. I've included all the necessary js, but keep getting an error in the dev tools console: 'Uncaught TypeError: $(...).stellar is not a function'. Here's what I have in the head tags: ...

javascriptjqueryhtml

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the i ...

javascripthtmlcssvue-componentvuejs3

Is there a way to decrease the speed of a range slider?

Recently, I created a range slider using HTML, CSS, and JS to complement my Lua Nui. It's been working smoothly for the most part, but I've noticed an issue when sliding too quickly on the slider. As I slide it to the left, certain values fluctua ...

javascripthtmlcssluaslider

What is the best way to extract numbers from a string using JavaScript?

I am working with a string in javascript that looks like this: var xyz= "M429,100L504.5,100L504.5,106L580,106L570,98M580,106L570,114"; My goal is to extract the numbers and store them in an array. I attempted the following code: var x=xyz.match(/\ ...

javascripthtmlregexjspextjs

Launch a new window with the window.open() method and execute a function on the newly opened window

I am having trouble generating a barcode in a new window using the barcode generator script. Despite trying to use window.focus(), I can't get the barcode to appear in the new window. Any assistance on how to generate the barcode in a separate window ...

javascripthtmlgoogle-chrome

Customizing Material-UI styles using makeStyles

Currently, I am in the process of building a small portfolio website. Despite my attempts to style an avatar using the makeStyles class, it seems that the Mui avatar root is overriding my desired styling. I am wondering if there is a way to achieve this w ...

cssreactjsmaterial-ui

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

After calling an API, the response contains data in the following format: [{name: "ABC", age: 20}, {name: "DEF", age: 25}] Even though the $scope.names variable is assigned with the array from the API, when viewed in the browser, it displays 2 rows but th ...

htmlangularjs

The alignment of bullets in CSS property list-style-position is off

I'm encountering an issue with aligning the list items. I've been using the CSS property list-style-position: inside; Typically, the bullet points appear outside of the text, like this: https://i.stack.imgur.com/LcVB0.png This doesn't seem ...

htmlcss

Implement a sequence of animations within a div using jQuery

My goal is to create an animation effect for each div element within a row when the user scrolls down to that specific point on the page. The layout consists of three <div> elements in the same row. The structure of the HTML code is as shown below: ...

javascriptjqueryhtmlanimation

Divide an HTML file into separate documents upon submitting a form

Is there a way to input HTML into a text area, then upon submission, have the system read the file, identify the class selector, and separate the HTML into multiple files saved in a directory? If you have any thoughts on how this could be accomplished, pl ...

javascriptphpjqueryhtmlforms

Creating an XPath expression for selecting multiple siblings of a div tag

Currently, I am working on writing an XPath expression for a specific section of code: <div class="line info"> <div class="unit labelInfo TextMdB">First</div> <div class="unit lastUnit"> <div clas ...

htmlcssseleniumxpath

Unequal spacing between the edges of two background images

I am attempting to create two distinct "layers" of background on my webpage by encapsulating the content within a div element. Strangely, the background set for the div is being clipped before it reaches the edge of the screen, while the one designated as ...

htmlcss

Managing the load more feature with a Selenium script using Python

As a newcomer to Python, I am experimenting with automating clicks on the "load more" button found in the comment section of Instagram using Selenium and Python. Despite being able to click once successfully, the button disappears after the first click. ...

pythonhtmlseleniumwebautomation

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the ...

htmlcssflexbox

Troublesome behavior from Bootstrap's datepicker

Recently, I decided to dive into front-end development using Bootstrap but I'm facing some challenges. There are two issues here. The calendar glyph is appearing under the date input field instead of at the end of it on the same line. The picker is ...

jquerycssbootstrap-4responsive-design

Retrieving data from dynamic form components in Angular

I am currently utilizing a back-end API to retrieve flight data, which I then iterate through and exhibit. The layout of my template code is as follows... <form novalidate #form="ngForm"> <div class="flight-table"> <header fxLayou ...

htmlangularangular-forms

Utilizing a Clear Button to Reset Specific Fields in a Form Without Clearing the Entire Form

I am currently working on a multipart form that includes 'Name', 'Email', and 'Phone Number' fields. It's important to note that the phone number field is actually composed of 10 individual single-digit fields. To enhan ...

javascripthtmljqueryforms