A CSS rule to display a nested list on the left-hand side

I created a menu that you can view here. When hovering over "tanfa demo example," the sublist appears on the right side.

The issue I'm facing is that my menu is positioned all the way to the right, which means the sublist also appears on the extreme right. I'd like the sublist to show up on the left instead.

I attempted to use CSS properties like "left: 0; top: 0;" but this just causes the sublist to overlap at the top-left corner of its parent element.

What I really need is for the menu to start from the "left: 0; top: 0" position of its parent and then slide towards the left. Ideally, I'd like to find a CSS solution for this problem.

javascriptjquerycssdrop-down-menu

Answer №1

Consider using right: 100% as an alternative to left: 0. This will instruct your menu to align its right edge with the leftmost edge of its parent, rather than positioning its left edge at the leftmost edge. Hopefully this suggestion proves helpful!

Answer №2

If my interpretation is correct, in order to shift the subcategories to the left of the main list, adjust their left attribute to -100%.

#submenu ul ul ul {
position: absolute;
top: 0;
left: -100%;
width: 100%;
}

http://jsfiddle.net/D8zRp/2/

Answer №3

Here is a suggestion to consider: Apply a negative margin to the child element (pop-up list) that is twice the size of the margin set for the parent list.

For example, you can add the following to the pop-up list:

{
    margin: 0 -400px; /* 0 indicates no top or bottom margin */
}

Note: Proceed with caution as this approach may require additional code modifications to function correctly.

Answer №4

When you use left:0, you are defining the position to be at 0. Instead of this, consider using left:auto;. Here is an example:

#menu ul ul ul {
position: absolute;
top: 0;
left:auto;
right:100%;
width: 100%;
}

You can also remove left:0 as suggested by jakee.

View this example here: http://jsfiddle.net/wEExT/9/

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

Executing jQuery code after PHP content has loaded

I am currently working on a website using the Big Commerce platform. The cart page is constructed using PHP snippets, but unfortunately, I do not have access to the PHP files. My goal is to extract the value of a span tag at a specific index and use this v ...

phpjquery

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

javascriptjqueryhtmljsonangularjs

Guide on how to prevent Paste (Ctrl+V) and Copy (Ctrl+C) functionalities in a TextField within MaterialUI

Is there a way to restrict the Paste (Ctrl+V) and Copy (Ctrl+C) functions in a specific TextField within MaterialUI? I am currently working with ReactJs ...

javascripthtmlcssreactjsmaterial-ui

Property computation being initiated before property initialization

I am encountering an issue in my Vue application where I am trying to filter an array received from map getters based on a type prop within a computed property. Despite verifying that both the array elements and the prop are strings, the filtering process ...

javascriptvue.jsvuejs2vuexvuex-modules

Javascript - readjust weight distribution accordingly when a weight is removed

I am in possession of a dataset that shows the proportion of each test contributing to the final grade. In cases where a student has missed one or more tests, the weight is redistributed accordingly among the tests they did take. I want to determine how ...

javascriptarraysjavascript-objects

Triggering a Bootstrap 5 dropdown through code is only effective within the browser's developer console, rather than standard JavaScript implementation

I attempted to display a Bootstrap5 dropdown by clicking on a link in my web application. Despite trying various methods, such as dispatching events and utilizing the bootstrap Dropdown classes, I was unable to achieve success. Interestingly, both approach ...

javascriptbootstrap-5

What is the process to create text in bold format in an HTML document?

I'm having difficulty making certain text bold with HTML. Unfortunately, I can't seem to figure out the correct method. Here is my attempted code snippet: Some <bold>text</bold> that I'm trying to highlight. Could someone prov ...

csshtml

FullPage.js combines traditional scrolling with a unique horizontal slider feature

Visit this link for the example. Hello, I have a question regarding this example: Is there a way to disable the automatic scrolling that occurs when reaching the middle of a page? Also, I am having trouble with the horizontal slider not responding to ...

javascriptjquerysliderfullpage.js

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

Encountering an issue with my signalr/hub while fetching dashboard data. I'm using 2 browsers to access data based on dates. However, when searching for July on browser 1 and then switching to another month on browser 2, the data in browser 1 gets upd ...

javascriptc#cssmodel-view-controllersignalr-hub

There was a rendering error: "Type Error: Unable to access the 'PAY_TYPE' property of null"

I am attempting to retrieve the PAY_TYPE value from the callback_details object by using JSON.parse() function to convert a string into an object. However, I keep encountering an error related to the question's title. Here is my code snippet: <td ...

javascriptvue.js

What is the best way to create space between floated elements and a cleared element?

I have a webpage with various floated boxes and a footer positioned at the bottom. The issue arises when trying to create space between the boxes and the footer without using margins. #main { max-width: 700px; margin: 0 auto; } .box { width: 46.6 ...

css

Having difficulty displaying this code accurately on Google Chrome

I managed to create a hover effect over a series of images that displays additional information when hovered over. Below is the code I used: HTML <ul class="photo-grid"> <li> <a href="https://www.abglobal.com/" target="_blank"& ...

htmlcssgoogle-chromemousehover

How can an HTML5 application be configured to enable access to intranet and local files?

It's a known fact that accessing the local path of a file added using a file input field or drag-and-drop is not possible even with the new FileAPI. Whether this limitation is good, bad, or ugly is not up for debate. The FileAPI specs clearly state th ...

javascripthtml

What could be causing my website to automatically adjust the CSS height on its own?

My code looks like this: <li style = "height: 250px;"> <p>Foo</p></li> Despite my efforts, when I visit the website, the height doesn't seem to change. After inspecting the element in Chrome, I discovered that it's s ...

htmlcssheighthtml-lists

NPM encountered difficulties in resolving the dependency tree

I seem to be encountering a persistent issue that I cannot resolve on my own. My attempt to update webpack and webpack-cli in a project has been met with repeated errors of this nature: npm install webpack@latest --save-dev npm ERR! code ERESOLVE npm E ...

javascriptnode.jsnpmbundlerwebpack-5

Utilizing regular expressions to search through a .md file in JavaScript/TS and returning null

I am currently using fs in JavaScript to read through a changelog.MD file. Here is the code snippet: const readFile = async (fileName: string) => { return promisify(fs.readFile)(filePath, 'utf8'); } Now I am reading my .md file with this fu ...

javascriptregextypescriptreadfile

Creating connections between variables and elements in nested ngRepeats in Angular

I've been facing a challenge with my app where I need to update the comments section whenever a comment is added, edited, or deleted without having to refresh the page. I am using ngResource to handle queries for both articles and comments (e.g. $scop ...

javascriptangularjsscope

Ways to conceal an HTML checkbox while displaying its accompanying label

Recently delving into jQuery, I have been exploring how to utilize the jQuery-ui Selectable component as a substitute for checkboxes. http://jqueryui.com/demos/selectable/ I believe I may be able to achieve this if I can discover a method to conceal the ...

jqueryhtmlcheckboxjquery-ui-selectable

What is the process of transferring information from an AngularJS factory to a controller?

I am trying to access raw data object from an angularJS factory that serves as a dataSource for a kendo grid. Despite being able to console log the data in the factory, I'm facing difficulty populating the data object in the controller. How can I retr ...

javascriptangularjskendo-grid

Ways to prevent a timeout when the score exceeds 1000

Could someone help me with clearing the interval and resetting the score in my code? It seems to be working fine, but when the score goes over 1000 and I hit reset, it doesn’t reset completely. I've tried placing the clearTimeout functions before e ...

javascripthtmlcssintervals