CODEWITHSUNDEEP
htmlcss
Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

Absolute positioned element not displaying based on its parent

I have been trying to make a dropdown menu using the nested unordered lists. Actually I'm having a parent unordered list which is having some <li> contains the first level menus. and i tried to insert unordered lists inside those first level menus i.e] inside those <li>. well i positioned the internal unordered list as absolute and i assigned left for them as 0.

And here comes the problem, The internal unordered list's parent should be the <li> element. But it assumes its parent as the main unordered list i.e] the parent of the <li> element. As a result the internal unordered list displays to the left of 0 with relative to the main unordered list. My need is to display it relative to the <li> element. What i am doing wrong .? why did that internal unordered list not assuming its parent as <li> element.?

DEMO - Fiddle

Upvotes: 0

Views: 52

Answers (2)

Harshit Tailor
Harshit Tailor

Reputation: 3281

Use this css 

#ULHeaderMenuWrapperMenuCollection > li {
display: inline;
padding-left: 15px;
cursor: pointer;
position: relative;
}

set position: relative; in parent li

Demo

Upvotes: 1

Vimal Stan
Vimal Stan

Reputation: 2005

Set the parent li's style to:

#ULHeaderMenuWrapperMenuCollection > li {
    /*Other styles*/
    position: relative;
}

Upvotes: 2

Related Questions