Question

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/

Answer 1

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/