Arranging the placement of the dropdown menu

I am struggling with positioning the items in my dropdown menu. The functionality itself is working perfectly, but the issue arises when it comes to aligning the dropped down items. Initially, I positioned them based on a smaller screen size, but when viewing it on a larger screen, the alignment was off.

http://jsfiddle.net/sArTd/1/

While the dropdown functions correctly in jsFiddle, uncommenting the 'tests' in the HTML section reveals the problem I am facing. If the parent item of the dropped down list shifts left or right, the dropped down items do not adjust accordingly.

Upon inspection, I realized that I used left:... for positioning the dropped down items, which seems to be causing the issue. Unfortunately, I am unsure of the correct way to position them. Can you help me solve this problem?

jqueryhtmlcss

Answer №1

Enclose your menu link and menu list within a ul list. (If I understand your question correctly)

HTML

<ul class="main">
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' id="Notification">Notifications</a>
        <ul id="popOut1">
            <li><a href='#'>Dropped</a>
            </li>
        </ul> 
    </li>
    <li><a href='#' id="Settings">\/</a>
        <ul id="popOut2">
            <li><a href="#">Settings</a>
            </li>
            <li><a href="#">Logout</a>
            </li>
        </ul>
       </li>
</ul>

CSS

ul.main, li{
        list-style: none;
    margin: 0;
    padding: 0; display:inline-block;
    background:red;
    position:relative
}

DEMO

Answer №2

If you revise your layout, consider implementing it with 

<ul>
<li><a />
 <ul>
   <li><a /></li>
 </ul>
</li>
</ul>

By doing this, you will have the option to apply position:relative on the li and setting left:0 will position it correctly.

Answer №3

One effective way to position the menu is by using jQuery since it allows for dynamic responses to UI changes such as window resizing.

Consider implementing something similar to the following:

$opener.on("click", function() {
    $menu.show();
    $menu.css({
        top: $opener.position().top + $opener.outerHeight() + 'px',
        left: $opener.position().left + 'px'
    });
});

Ensure that the menu is set to position: absolute and its container has a style of position: relative.

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

Round up all the hyperlinks within a paragraph and organize them neatly into a list

Let me present a scenario: <p class="links">Lorem <a href="#">diam</a> nonummy nibh <a href="#">Lorem</a></p> Following that, I have a lineup: <ul class="list"> </ul> How do I achieve this using jQuery? ...

javascriptjqueryhtmlmarkup

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

Within a ListView, I have dynamically generated ImageButtons. If an image does not have a link, I want to make it disabled. In the ItemDataBound event, I attempted the following approach: img.Enabled = False img.DescriptionUrl = "javascript:void(0);" img. ...

htmlasp.netcsscursorimagebutton

Automatically scrolling a div to the bottom in a React component

I am currently working on developing a chat application for my school project, and I would like to implement the feature that automatically scrolls to the bottom of the chat window. Despite trying various solutions and encountering React errors, I have not ...

javascripthtmlcssreactjsscroll

Tips on making a multiline label using html

Can anyone help me with creating a multiline label in HTML and MVC3 using Razor engine? I would appreciate any ideas. Thank you! ...

htmlasp.net-mvc-3

How can I fetch data from SQL using JavaScript based on a specific value in PHP?

My application is built using the Yii2 framework. Within my application, there is a view.php file that consists of an element and a button. The element, <div id="userId">, contains the user's login ID, and I aim to use the button to re ...

javascriptphpjquerysqlyii2

Arranging Data in an HTML Table Using TableSorter

I have been trying to incorporate sortable columns into my HTML table and decided to experiment with the jquery tablesorter. I have followed the syntax below, but for some reason, my table is not allowing me to sort. Can you help me understand why? &l ...

phpjqueryhtmltablesorter

What is the best way to use toggleClass on a specific element that has been extended

I have been experimenting with this code snippet for a while. The idea is that when I hover my mouse over the black box, a red box should appear. However, it doesn't seem to be working as expected. Could someone please review this script and let me k ...

javascriptjquerycsshtmltoggle

PHP - Unable to store the input content

I've encountered an issue with my website where I need to create a form for users to submit new information or news. Below is the code snippet that I have: <?php include "0begin.php"; $title=$_POST["title"]; isset($title) or $title=$_GET["tit ...

phphtmlwebnetworking

Deleting an item from a Vue.js list

I'm currently working on a project to develop a basic webpage that allows users to add or remove textboxes using vue.js. new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(index) { this ...

javascripthtmlcssvue.jsweb

How to Ensure an Absolutely Positioned Element Occupies the Full Width of its Container

My main content area has a sidebar positioned absolutely to the right side due to various reasons. However, I am facing an issue where if the main content area is shorter, the sidebar extends beyond the content. Do you know of any CSS technique that can h ...

htmlcsslayout

Issue: AngularJS Injector Module Error

Recently started learning angularjs and trying to set up an app. Here's a simple and direct way to do it: Angular controller: (function () { 'use strict'; angular .module('myQuotesApp') .controller(' ...

javascriptc#htmlangularjs-directiveasp.net-core-mvc

What could be causing my anchored link to redirect incorrectly?

My navigation bar correctly directs me to the 'work' section, but when I click on ABOUT in the navigation bar, it drops down about 300px above the 'about' h2. I suspect that this issue may be related to positioning and display settings. ...

csshtmlposition

Optimizing Your Click-to-Call Phone Number for Your Website

When building a responsive webpage using Twitter Bootstrap, I noticed that certain elements are only visible on smaller resolutions like tablets and phones. On an iPhone with OS7, I found that leaving phone numbers as plain text without a link allows the ...

phpjqueryhtmlcss

Clicking on the Submit button of the post form simply refreshes the page

Every time I try to submit values from an HTML form, the page reloads without any changes. I've double-checked the routes and controller, but everything seems correct. Solution <div class="panel-body"> @if (session('status')) ...

phphtmllaravel

Convert JSON data from jQuery into a modal form within a div element

I am currently working on an MVC application and attempting to populate a bootstrap modal form with data from the server. My approach involves: 1) Loading a grid with various IDs, each linked to a javascript onclick function. 2) The function retrieves th ...

jqueryhtmlajax

If one sibling requires flexing, apply flex to all siblings

Illustrative Issue: large: small: When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least one needs to? Instead of viewing it like this, I aim for it to ...

htmlcsssvgflexboxcss-grid

Creating a flexible image layout within a container with relative positioning

I attempted to create a basic slideshow with images sliding from right to left as an animation: let slides = document.querySelectorAll('.img-container'); let l = slides.length; let i = 0; setInterval(function(){ i = (i + 1) % l; if(i == 0){ f ...

javascripthtmlcss

Animate an image to the right when clicked, then return it to the left with a second click

Seeking help with animating a set of images to move individually 300px right on first click, and then 300px left when clicked again. I'm currently facing an issue where my code is not working. It could be due to A) syntax errors or B) the images not ...

javascriptjqueryhtmlcssjquery-animate

Automated scrolling effect within a container element

I am working on a div container named wrapper2 that houses a chat interface. Inside the container, there are five messages in a div called chatleft, each containing images. The height of the wrapper2 div is smaller than the combined height of all the messa ...

htmlcss

What is the best way to determine the height of a DIV element set to "auto"?

When setting a fixed height on a div using jQuery, such as $('div').height(200);, the value of $('div').height() will always be 200. This remains true even if the content within the div exceeds that height and overflow is hidden. Is th ...

javascriptjquerycssheight