<style>
.mainChoice, .subChoice {
margin: 0.5em 1.5em;
}
.subChoice {
display: none;
margin-right: 0;
}
.mainChoice h4, .subChoice h4 {
padding: .5em 0;
margin: 0 0 0 -.5em;
}
.mainChoice p, .subChoice p {
background: white url(/content/media/pickArrow2.png) no-repeat 0 center;
white-space: nowrap;
text-decoration: none;
color: maroon;
padding: .5em 1em .5em 24px;
width: 6em;
margin: 0;
cursor: default;
}
.mainChoice p:hover, .subChoice p:hover {
background-image: url(/content/media/pickArrow1.png);
background-color: lightyellow;
color: red;
}
</style>
<div id="picker" class="mainChoice">
<h4>Pick One</h4>
<p class="fbTooltip"
data-fb-tooltip="source:#animal placement:right delay:0 fadeTime:0"
>Animal...</p>
<p class="fbTooltip"
data-fb-tooltip="source:#vegetable placement:right delay:0 fadeTime:0"
>Vegetable...</p>
<p class="fbTooltip"
data-fb-tooltip="source:#mineral placement:right delay:0 fadeTime:0"
>Mineral...</p>
<p class="choice">Other</p>
</div>
<div id="animal" class="subChoice">
<p class="choice">Aardvark</p>
<p class="choice">Monkey</p>
<p class="choice">Zebra</p>
</div>
<div id="vegetable" class="subChoice">
<p class="choice">Arugula</p>
<p class="choice">Miner's Lettuce</p>
<p class="choice">Zucchini</p>
</div>
<div id="mineral" class="subChoice">
<p class="choice">Antimony</p>
<p class="choice">Molybdenite</p>
<p class="choice">Zircon</p>
</div>
<script>
fb.addEvent( 'p.choice', [ 'click', 'touchend' ],
function ( e ) {
var instance;
fb.stopEvent( e );
// update the input element on the main page
fb.$( 'chooser' ).value = this.innerHTML;
if ( instance = fb.getOwnerInstance( this ) ) {
// the floatbox that the clicked choice resides in
instance.end();
}
if ( instance = fb.getInstance( 'picker' ) ) {
// would have already ended if the clicked choice is in the picker
instance.end();
}
}, true
);
fb.preload( [ '/content/media/pickArrow1.png', '/content/media/pickArrow2.png' ] );
</script>