jQuery Mobile - Collapsible List as a header bar item - jquery-mobile

Question

I'm trying to give a "Options" drop down in the header bar. I've successfully added it to the header. But the problem is, it is stretching in its "expand" state, and return to normal in its collapse state.
Here's the fiddle to the problem : http://jsfiddle.net/vNTR5/
I've tried a couple of things :
I noticed the "ui-collapsible-heading ui-collapsible-heading-collapsed" class in the collapsed state, vs "ui-collapsible-heading" class in the expanded state. I captured the events and tried adding the "ui-collapsible-heading-collapse" class. It resulted in keeping the list permanently "expanded" once it had been expanded.
I tried making custom css class, and adding and removing those. But it simply won't take in margin-left added through a class. It takes it when its inline.
Please help.
Code snippet:
HTML:
<div data-role="header">
<h1>Main Menu</h1>
<div data-role="collapsible" id="optionsMenu" data-mini="true" class="rightMenu" data-collapsed-icon="gear" data-expanded-icon="gear">
<h3 style="margin-left:-20%;">Options</h3>
<ul data-role="listview">
<li data-icon="false">Settings</li>
<li data-icon="false">Logout</li>
</ul>
</div>
</div>
CSS:
.rightMenu{
position: absolute;
top:-10%;
right:2%;
}

Answer 1

Working example: http://jsfiddle.net/Gajotres/FSSzK/
.rightMenu {
position: absolute;
top:-10%;
right:2%;
width: 100px !important;
}
.rightMenu .ui-collapsible-content .ui-listview {
margin: -10px -15px -10px -35px !important;
}