CSS dropdown submenu with dynamic width: how to align left?


Tags: html,css

Problem :

It's easy to have a LI > UL submenu show up with CSS:

.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; padding-left: 0px; margin: 1px; background: #ddd; width: 100px; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; }
.menu li:hover > ul li { display: block; background: #bbb; width: auto; }

In this case, the size of the submenu automatically adjusts to the width of the content. The submenu aligns left where the left of the parent LI element is.

Let's say I want to align the submenu to the right, so the right should lign up with the parent LI's right side. I can do that by having a fixed width of the submenu, and use this (assuming the parent LI is 100px wide):

#menu-left li:hover > ul { width: 150px; margin-left: -50px; }

But then you can't use flexible width submenu's anymore. Also, you need to know the width of the parent LI.

JS Fiddle explains my question best: https://jsfiddle.net/ybc0uxq8/1/

Anyone knows a way to have the right side of the sub UL lign up with the right side of the parent LI without needing a fixed submenu width, and allowing for a submenu width larger than the parent LI?



Solution :

According to the comments/request, here is the edited version of the original CSS code to reflect the desired result:

/* apply to both */
.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; position: relative; padding-left: 0px; margin: 1px; background: #ddd; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; right: 0; }
.menu li:hover > ul li { background: #bbb; white-space: nowrap; }

    CSS Howto..

    Showing HTML page with CSS attached in a WebView

    How to set background color of td in CSS

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    How do I add or change the class attribute of a JSF dataTable (primefaces)?

    How do I change the a border-color on rollover?

    Avoid the height change of a container + how to position a list item at end

    How to set absolute css path as in jsp

    Semantic UI css messing with min-width property. How do I fix?

    How to select all fieldsets in a form except the first one?

    How to center an image between two columns in CSS?

    How to apply a underline style to piece of text

    How to Change Font-family using JQuery's .css() function?

    How to change position using CSS

    How to avoid orphaned headings in CSS columns?

    How to disable external css stylesheet - Newbie

    How to use a different font CSS color for all Internet Explorer browser versions?

    How to put an image in div with CSS?

    How to change just the css inside a DIV and not anywhere else?

    How to render a template with dynamic CSS?

    How to override parent containers width property in CSS [duplicate]

    How to apply css style to custom attributes

    How to display first tab by default in css?

    Show content only in printing page not in browser page using CSS or javascript

    How to add or create an illusion of movement to a fixed div?

    Navigation Menu That Shows/Hides On Rollover and Click

    How to select an html element that has two class names?

    How can I have a div/span “fill in” the remaining width/height of the page, and stay fixed in position?

    How to build a special polygon (a kite shape) with HTML & CSS only?

    How can set text row limit using angularJs ng-repeat?

    How to? CSS “Position:Absolute” constant Margin-Top? Possible?