<div class="ui_section">
            <h2>Navigations</h2>
            <br>
                <h3>Button Navigations</h3>
                <hr>
                <h3>Default</h3>
                <div class="demobox">

                    <div class="mw-ui-btn-nav">
                        <a href="javascript:;" class="mw-ui-btn"><span class="mai-home"></span></a>
                        <a href="javascript:;" class="mw-ui-btn mw-ui-btn-info">Services</a>
                        <a href="javascript:;" class="mw-ui-btn">About</a>
                        <a href="javascript:;" class="mw-ui-btn active">Contact</a>
                    </div>

                </div>
                <br>


                <div class="demobox" style="max-width: 400px;">
                    <h4>Fluid</h4>
                    <ul class="mw-ui-btn-nav mw-ui-btn-nav-fluid">
                        <li><a href="javascript:;" class="mw-ui-btn">Home</a></li>
                        <li><a href="javascript:;" class="mw-ui-btn active">About</a></li>
                        <li><a href="javascript:;" class="mw-ui-btn">Contact</a></li>
                    </ul>
                </div>
                <br>
                <div class="demobox">
                    <h4>Vertical</h4>
                    <div class="mw-ui-btn-vertical-nav">
                        <a href="javascript:;" class="mw-ui-btn">Vertical</a>
                        <a href="javascript:;" class="mw-ui-btn active">Button</a>
                        <a href="javascript:;" class="mw-ui-btn">Navigation</a>
                    </div>
                </div>
                <div>
                    <br><br>
                    <h3>List Navigations</h3>
                    <hr>


                    <ul class="mw-ui-navigation" style="width: 150px;">
                        <li><a href="javascript:;" class="active">Home</a></li>
                        <li>
        <a href="javascript:;">About</a>
                            <ul>
                                <li><a href="javascript:;">Lorem Ipsum</a></li>
                                <li>
        <a href="javascript:;">Etiam condimentum</a>
                                    <ul>
                                        <li><a href="javascript:;">Lorem Ipsum</a></li>
                                        <li><a href="javascript:;">Etiam condimentum</a></li>
                                        <li><a href="javascript:;" class="active">Sed aliquam erat id mauri</a></li>
                                        <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                        <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                        <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:;" class="active">Sed aliquam erat id mauri</a></li>
                                <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:;">Blog</a></li>
                        <li><a href="javascript:;">Forum</a></li>
                        <li><a href="javascript:;">Help</a></li>
                        <li><a href="javascript:;">Contacts</a></li>
                    </ul>
                    <br><br>
                    <ul class="mw-ui-box mw-ui-navigation" style="width: 150px;">
                        <li><a href="javascript:;" class="active">Home</a></li>
                        <li>
                            <a href="javascript:;">About</a>
                            <ul>
                                <li><a href="javascript:;">Lorem Ipsum</a></li>
                                <li>
                                    <a href="javascript:;">Etiam condimentum</a>
                                    <ul>
                                        <li><a href="javascript:;">Lorem Ipsum</a></li>
                                        <li><a href="javascript:;">Etiam condimentum</a></li>
                                        <li><a href="javascript:;" class="active">Sed aliquam erat id mauri</a></li>
                                        <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                        <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                        <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:;" class="active">Sed aliquam erat id mauri</a></li>
                                <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                <li>
                                    <a href="javascript:;">Vestibulum porta eros purus</a>

                                </li>
                            </ul>
                        </li>
                        <li><a href="javascript:;">Blog</a></li>
                        <li><a href="javascript:;">Forum</a></li>
                        <li><a href="javascript:;">Help</a></li>
                        <li><a href="javascript:;">Contacts</a></li>
                    </ul>
                    <br><br>
                    <ul class="mw-ui-navigation mw-ui-navigation-horizontal">
                        <li><a href="javascript:;" class="active">Home<span class="mw-icon-gear"></span></a></li>
                        <li>
                            <a href="javascript:;">About <span class="mw-icon-dropdown"></span></a>
                            <ul>
                                <li><a href="javascript:;">Lorem Ipsum</a></li>
                                <li>
                                    <a href="javascript:;">Etiam condimentum</a>
                                    <ul>
                                        <li><a href="javascript:;">Lorem Ipsum</a></li>
                                        <li><a href="javascript:;">Etiam condimentum</a></li>
                                        <li><a href="javascript:;" class="active">Sed aliquam erat id mauri</a></li>
                                        <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                        <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                        <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:;" class="active"><span class="mw-icon-gear"></span> Sed aliquam erat id mauri</a></li>
                                <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:;">Blog</a></li>
                        <li><a href="javascript:;">Forum</a></li>
                        <li><a href="javascript:;">Help</a></li>
                        <li><a href="javascript:;">Contacts</a></li>
                    </ul>
                    <br><br> <br><br><br><br>
                    <ul class="mw-ui-box mw-ui-navigation mw-ui-navigation-horizontal">
                        <li>
                            <a href="javascript:;" class="active">Home</a>
                            <ul>
                                <li><a href="javascript:;">Lorem Ipsum</a></li>
                                <li>
                                    <a href="javascript:;">Etiam condimentum</a>
                                    <ul>
                                        <li><a href="javascript:;">Lorem Ipsum</a></li>
                                        <li><a href="javascript:;">Etiam condimentum</a></li>
                                        <li><a href="javascript:;" class="active">Sed aliquam erat id mauri</a></li>
                                        <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                        <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                        <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:;" class="active">Sed aliquam erat id mauri</a></li>
                                <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:;">About</a></li>
                        <li><a href="javascript:;">Blog</a></li>
                        <li><a href="javascript:;">Forum</a></li>
                        <li>
                            <a href="javascript:;">Help</a>
                            <ul>
                                <li><a href="javascript:;" class="active">Lorem Ipsum</a></li>
                                <li><a href="javascript:;">Etiam condimentum</a></li>
                                <li><a href="javascript:;">Sed aliquam erat id mauri</a></li>
                                <li><a href="javascript:;">Nullam luctus ut libero sit</a></li>
                                <li><a href="javascript:;">Cras interdum enim dolor</a></li>
                                <li><a href="javascript:;">Vestibulum porta eros purus</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:;">Contacts</a></li>

                    </ul>
                </div>

        </div>