Html5 DropDownButton

Set the dropDownVerticalAlignmentproperty of the jqxDropDownButton. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'>
    <div style='float: left; margin-top: 400px;' id="dropDownButton">
        <div style="border: none;" id='jqxTree'>
            <ul>
                <li item-selected='true'>Home</li>
                <li item-expanded='true'>Solutions
                    <ul>
                        <li>Education</li>
                        <li>Solutions
                            <ul>
                                <li>eLearning</li>
                                <li>Mobile</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Products
                    <ul>
                        <li>PC products</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

JavaScript

$("#dropDownButton").jqxDropDownButton({
     width: 250,
     height: 30,
     theme: 'energyblue',
     dropDownVerticalAlignment: 'top'
 });
 $("#jqxTree").jqxTree({
     theme: 'energyblue', width: 200
 });
$("#dropDownButton").jqxDropDownButton('setContent', "<span style='height: 30px; line-height: 30px;'>Please Select</span>");