html - absolute ignoring parent padding -

i using bootstrap , trying create own dropdown menu on right side.

i tried below css.but ignoring parents padding.but when use position : relative working fine pushing text contents down.so want absolute overlay preserve parent padding.

.menu {   background:#ccc;   top: 50px;   right: 0px;   position: absolute;   clear: both; } 

here fiddle html - http://jsfiddle.net/97bqun6s/

p.s: parent bootstrap .container class padding varies screen sizes.

when use position: absolute on element element positioned within closest 'non static' parent container's content area , padding box. can refer box model reference.

a simple solution right: 15px. offset side-nav right align rest of container.

see jsfiddle

edit:

since padding of container variable may not viable solution.

you instead add wrapper div inside container

<div class="container">     <div class="content-wrap">         ...     </div> </div> 

and position relative.

 .content-wrap {     position: relative;  } 

see updated jsfiddle