CSS/Menu: How to position element right below/beside elements


Tags: css

Problem :

Suppose I have markup as setup

http://jsfiddle.net/ADxne/

Currently drop downs look like

To solve the 1st problem, I could add a margin-top to child ul's to compensate for padding in list items http://jsfiddle.net/ADxne/1/

.horMenu > li > ul {
    margin-top: 10px;  
}

but for the 2nd problem without a fixed width list or list items, is there a way to position the sub menu to the right of the list item? Or is the only way to set a fixed width? http://jsfiddle.net/ADxne/2/



Solution :

you can use absolute positioning for .horMenu ul ul and then move it to right. Also add a fixed width. So with the above the .horMenu ul ul will be modified to the following:

.horMenu ul ul {
    left: 80px;
    position: absolute;
    top: 0;
    width: 80px;
}

check a live example: http://jsfiddle.net/ADxne/3/


    CSS Howto..

    how to change CSS on the youtube subscribe widget

    How can I get images floated to the left of other definition list elements?

    How to make a div next to each other in CSS

    How to call single dropdown to every element using jquery

    How can I take just a part of CSS from other site's when using bootstrap?

    How to use font-awesome from server

    How to change both fill and stroke in svg with css

    How do I draw a line in CSS that starts wide and ends in a point [duplicate]

    How to change the src of an iframe with css

    How to show a region on a image with CSS

    How to order rows (or divs) vertically using blueprint css?

    save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory [duplicate]

    How to write conditional css?

    How to remove blue highlight when you hold on input buttons in css? [closed]

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    select the element before the last using nth child regardless of how many elements you have? [duplicate]

    Resize the content of a div based on how many objects are in the div

    How to format text using CSS

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to hide all checkboxes using CSS

    A really simple question: How to apply a style to an iframe whose parent tag's id is known?

    How to scale content for displays keeping the ratio [closed]

    How to display two forms next to each other

    How does CSS works under the hood? [closed]

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    How to make TD behaving like TR(row) with CSS?

    How to add another text decoration definition with Javascript?

    CSS: How to break images into rows?

    How to get Owl Carousel Owl-Page (dots) Responsive

    CSS - How to set gradient color background for different heights