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 link a HTML page to a CSS file when the CSS file is in an upper directory?

    How to modify a CSS display property from JavaScript?

    How to create a multi colored circle in html and css

    How to set font family and size in html/css

    How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?

    jQuery + CSS: How to scroll smooth, regarding a fixed header?

    how to load different css files with different screen sizes?

    How to place a Show/Hide toggle button next to a header (not under the header)?

    How do I make this lightbox I am creating only open on the div I am clicking?

    CSS - How to target Second Child List Items?

    How to align/move Vaadin buttons

    How to dynamically pass variables from HTML to CSS [closed]

    How to make divs appear and disapear on hover in css?

    How to float elements to the center in CSS?

    How to show span class inside the textbox?

    why there is opacity on image how to put no opacity on image and put hover function on div?

    Browser sizing Ctrl +/- :: How to manipulate settings?

    How to make css transform-origin property work in IE7 and IE8?

    How to use a lower resolution image for mobile?

    How to make the width of parent div equal to the width of child image, and height of child image to height of the parent div using CSS only

    a[title] not showing expected result [closed]

    How to indent the text in a custom unordered list

    How to only use jquery .css() on a specific media query?

    How do I apply desktop media queries style to IE?

    How to dynamically generate droppable/draggable/sortable div elements within a div?

    how to make multiple inline dropdown lists cross platform compatible?

    How to mix colors in CSS?

    How to select all a pseudo-classes in CSS?

    How to CSS pairs of DIV text left/right of center

    How to keep width of the main container to maximum width in a 3 column fluid layout?