How do I position a div right below a button using CSS and Jquery?

I have a button that, when hovered over, reveals a hidden div element.

Is there a way to position this div directly beneath the button once it is revealed?


<script type="text/javascript>
$(document).ready(function(){
  $(".plans").hover(function() {
    $("#planssubnav").show("slow");
  }, function(){
    $("#planssubnav").hide("slow");
  });
});
</script>

<a href="/plans" style="font-size:14px;" class="plans fg-button fg-button-icon-right ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-s"></span>Plans</a>

<div id="planssubnav" style="display:none">
<h1> content</h1>
</div>
jquerycss

Answer №1

To properly position your pop-up div, you should set its position to absolute in relation to another element.

You have the option of either placing it inside an a tag if that element is block-level, or enclosing both the button and pop-up text within a container element (li, div, or any other structure based on your menu).

The CSS code would look something like this:

#parent {
    position: relative;
}
#plansubnav {
    position: absolute;
    top: ...
    left: ...
}

Answer №2

Try enclosing your button within a different block-level element, like a div, to see the desired behavior.

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

I'm looking for a design that features larger font size for the number before the decimal point compared to the numbers that follow it

Is there a way to achieve different font sizes for the numbers before and after the decimal point using AngularJS, similar to what can be done with jQuery by assigning classes? .tdSplit { text-align: right; } .tdGreen { font- ...

jqueryangularjs

Issues with jQuery .ajax submission in IE and Chrome

When visiting any page like this one and clicking the "Have a Question" button in the left column, a form opens via jQuery Tools overlay. After filling out the form, it submits to a local PHP script for validation. Depending on the response from the server ...

jqueryajax

Display data-content vertically using CSS

Looking for a way to display text vertically one by one with CSS? While the rotation method produces this result: https://i.stack.imgur.com/utAiN.png However, I aim to achieve something more like this: https://i.stack.imgur.com/fuVyb.png If you have an ...

htmlcssrotationvertical-text

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...

javascriptjqueryhtmlcss

Troubleshooting Google Web Fonts

I seem to be using code similar to what I used before, but it appears that the fonts are not loading. <html> <head> <script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></s ...

htmlcssfont-face

Complete the form submission and transfer the data to ajax on a separate page

I'm working on a project where I have a form on page1.php that redirects to page2.php. My goal is to pass the data from the form to page3.php automatically when page2.php loads, without the user needing to see anything happening in page3. What would ...

phpjqueryajaxforms

The combination of eq, parent, and index appears to be ineffective

Okay, so I have this table snippet: <tr> <td> <input type="text" name="value[]" class="value" /> </td> <td> <input type="text" name="quantity[]" class="quantity" /> </td> </tr> Here& ...

javascriptjqueryhtml

What is it about the phone screen that makes media content so captivating?

My phone has a resolution of 2280x1080. I noticed that when using the following code, the background color changes to blue on my phone: @media (max-width: 500px) { body { background-color: blue; } } Interestingly, this feature stops working once "compute ...

htmlcssmedia-queries

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

cssbootstrap-4

Unpredictable Behavior of CSS Transition with JS createElement() Function

I'm using JavaScript to create a div element and I'm adding the CSS property transition: .5s linear top; When the user clicks on the element (onmousedown event), it is supposed to smoothly move to the top of the screen and then be deleted using ...

javascriptjquerycss

The forward button is malfunctioning after using history.pushState

I have managed to resolve issues with the back button, however, I am still unable to fix the forward button. Despite the URL changing, the page does not reload. Here is the code snippet that I am currently using: $('.anchor .wrapper').css({ &a ...

javascriptjqueryhtmlajaxpushstate

Add drop caps to every individual word within a hyperlink

Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word? I'm aware of the CSS code: p.introduction:first-letter { font-size : 300%; } that enlarges the first character of the first word, but I want this ef ...

javascripthtmlcsscapitalization

Learn how to bind a click event to a directive in AngularJS

Hello there! I am a beginner in AngularJS and I have a situation where I need to change the background color of a div with the ID "#single" and then make a call to the back-end server on a click event. Unfortunately, I am unsure how to achieve this using a ...

javascriptjqueryangularjs

The JSON parsing failed due to an expected '}' character missing

I'm in the process of making an ajax request $.ajax({ url: 'url', data: {}, method: 'POST', enctype: 'multipart/form-data', dataType: 'json', success: function(data){ // handle success ...

javascriptjqueryajaxjson

Animation is not applied to Bootstrap Collapse on a row within a table

My Bootstrap 4 table has an issue - when I apply the "collapse" class to a table row, it behaves differently compared to applying it to a div element. Clicking "animate div" smoothly animates the target div, but clicking "animate tr" does not animate the ...

javascriptcsstwitter-bootstrapbootstrap-4

Transform identical words in a website's content into clickable buttons

I'm currently in the process of developing a Chrome extension that scans a website for specific keywords and then converts them into interactive buttons. However, I've encountered an issue where changing the text causes the image path to become c ...

javascriptjquerygoogle-chrome-extension

What is causing the gradient to not fully extend across the entire element?

In my CSS, I have the following styling for a button: <a class="button"> <span>Y</span> </a> .button { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; ...

cssgoogle-chromewebkitgradient

Using Angular to assign a CSS variable to the before/after pseudo-classes

Having trouble passing a variable with [ngStyle] and reading it on the ::before class, any guidance in the right direction would be much appreciated! CSS: .handle-slider__control { height: 7px; z-index:1; background: $colour-alto; positi ...

htmlcssangular

Using jQuery to efficiently handle dynamically added elements by combining the ".on" and ".each" methods

I am currently in the process of dynamically inserting new elements into my page, and these elements have a specific structure that is represented as follows: <div id="cars"> <input type="text" name="car_added[]" class="car" /> <inp ...

javascriptjqueryclickeach

What is the best way to display information in a newly added row of a datatables table?

Working on ASP.NET gridview conversions with datatables.net plug-in. The reason behind this is complex and subject to debate. But, I need assistance with a specific issue. The process of converting the gridview using Javascript was simple and effective. H ...

javascriptjqueryasp.netgridviewdatatables