I have a dropdown (ul.sub-menu) with items inside (ul.sub-menu > li) that I'd like to apply jQuery Masonry to, but my dropdown is absolutely positioned. Is there a way to do this and keep my absolute positioning on the parent element?

Javascript

jQuery("ul > li > ul.sub-menu").masonry({
  itemSelector: '.brick',
  columnWidth: 300
});

HTML

<ul>
<li id="menu-item-9451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9451"><a href="/solutions/" >Solutions</a>
<ul class="sub-menu">
<li id="menu-item-9458" class="brick"><a href="/solutions/internal-social-software/" >Internal Social Software</a></li>
<li id="menu-item-9457" class="brick"><a href="/solutions/video-content-managment/" >Video Content Managment</a></li>
<li id="menu-item-9456" class="brick"><a href="/solutions/enterprise-content-management/" >Enterprise Content Management</a></li>
<li id="menu-item-9455" class="brick"><a href="/solutions/secure-file-sharing/" >Secure File Sharing</a></li>
<li id="menu-item-9454" class="brick"><a href="/solutions/redaction-and-document-viewing/" >Redaction and Document Viewing</a></li>
<li id="menu-item-9453" class="brick"><a href="/solutions/real-time-business-intelligence/" >Real Time Business Intelligence</a></li>
<li id="menu-item-9452" class="brick"><a href="/solutions/mobile-enterprise-applications/" >Mobile Enterprise Applications</a></li>
</ul>
</li>
</ul>

I have a dropdown (ul.sub-menu) with items inside (ul.sub-menu > li) that I'd like to apply jQuery Masonry to, but my dropdown is absolutely positioned. Is there a way to do this and keep my absolute positioning on the parent element?

Javascript

jQuery("ul > li > ul.sub-menu").masonry({
  itemSelector: '.brick',
  columnWidth: 300
});

HTML

<ul>
<li id="menu-item-9451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9451"><a href="/solutions/" >Solutions</a>
<ul class="sub-menu">
<li id="menu-item-9458" class="brick"><a href="/solutions/internal-social-software/" >Internal Social Software</a></li>
<li id="menu-item-9457" class="brick"><a href="/solutions/video-content-managment/" >Video Content Managment</a></li>
<li id="menu-item-9456" class="brick"><a href="/solutions/enterprise-content-management/" >Enterprise Content Management</a></li>
<li id="menu-item-9455" class="brick"><a href="/solutions/secure-file-sharing/" >Secure File Sharing</a></li>
<li id="menu-item-9454" class="brick"><a href="/solutions/redaction-and-document-viewing/" >Redaction and Document Viewing</a></li>
<li id="menu-item-9453" class="brick"><a href="/solutions/real-time-business-intelligence/" >Real Time Business Intelligence</a></li>
<li id="menu-item-9452" class="brick"><a href="/solutions/mobile-enterprise-applications/" >Mobile Enterprise Applications</a></li>
</ul>
</li>
</ul>

• javascript
• jquery
• wordpress
• jquery-masonry

Share Improve this question Follow edited Apr 3, 2012 at 15:06 Casey asked Apr 3, 2012 at 15:01 CaseyCasey 88122 gold badges99 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

In your Masonry settings try:

containerStyle: { position: 'absolute' }

See docs on containerStyle

By default, Masonry sets position: relative on the container.