UIKit drop down not working

Question

I have been trying to solve this problem for a few hours now but cannot find any information on my specific problem. I attempted to follow the documentation page, http://www.getuikit.com/docs/dropdown.html, made by the developers of UIKit but it has woefully incomplete examples so I am going by the source code used on that page as well as this one: http://www.cwu.edu/~cport/assets/uikit-master/src/tests/dropdown.html#

In both cases directly copying their code into Dreamweaver and then loading the webpage up in a browser for testing results in nothing working but if I go to their pages directly the drop downs and other stuff does work.

I am not sure what is going on to cause that kind of behavior. Here is what I have for the drop down menu in my html file:

<div class="nav_area">

    <a href="logopedia.html"><button class="uk-button uk-button-large uk-button-orange" id="lpBtn" height="12" width="145">Logopedia STS</button></a>
    <a href="carr.html"><button class="uk-button uk-button-large uk-button-orange" id="crBtn" height="12" width="145">Carr SLS</button></a>
    <a href="kinseo.html"><button class="uk-button uk-button-large uk-button-orange" id="ktBtn" height="12" width="145">Kinseo Tape</button></a>
    <a href="vitalstim.html"><button class="uk-button uk-button-large uk-button-orange" id="vsBtn" height="12" width="145">VitalStim</button></a>

    <div class="uk-button-dropdown" style="top: 10%" data-uk-dropdown>
        <button class="uk-button uk-button-large uk-button-orange" id="rrBtn" height="12" width="145">Refferal and Resources <i class="uk-icon-caret-down"></i></button>
        <div class="uk-dropdown">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Option 3</a></li>
            </ul>
        </div>
    </div>
</div>

And my nav.css section for these elements:

.nav_bkgd {
    position: absolute;
    top:30%;
    left: 31.35%;
    width:760px;
    height:80px;
    background-image:url(../media/imgs/nav_bkgd.png);
    background-repeat:no-repeat;
    z-index: 1;
}

.nav_area {
    position:absolute;
    top:30%;
    left: 31.35%;
    width: 760px;
    height:80px;

}

#lpBtn {
    position:relative;
    top:10%;
    left:3%;
    z-index:2;
}

#crBtn {
    position:relative;
    top:10%;
    left:4%;
    z-index:2;
}

#ktBtn {
    position:relative;
    top:10%;
    left:5%;
    z-index:2;
}

#vsBtn {
    position:relative;
    top:10%;
    left:6%;
    z-index:2;
}

.ddown {
    position:relative;
}

#rrBtn {
    position: relative;
    left:26%;
    z-index:2;
}

Finally here is the live website that I am building to illustrate the problem: http://www.logopediaspeechtherapy.com/

I have attempted all manner of messing around to attempt to get it working from loading all of the buttons inside of a list to making the nav object they are held in positionally relative. I know the drop down list is loading correctly as I can see it if I alter the style to display:block; for the uk-dropdown div but I cannot get it to show on hover or on click.

I am using UI Kit 2.8.0 and JQuery 2.0.3

Answer 1

I managed to fix the problem but I am not sure what caused it. To get drop downs working I had to download the UI Kit Master from GitHub and then copy the JQuery.js file from the vendor folder and then link that into my page.

I think that they have custom code or something and the JQuery file they use is not available in the release version.