<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/bdthemes/pen/qZqYOb?limit=all&page=36&q=uikit" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.min.css'>
<style class="cp-pen-styles">.uk-container {
padding: 30px;
}
.uk-navbar {
background-color: #444;
}
.uk-navbar .uk-navbar-nav > li a {
color: #ddd;
}
.uk-navbar .uk-navbar-nav li.uk-active > a {
background-color: #000;
color: #fff;
}
.uk-navbar > .uk-navbar-nav > li:hover > a {
background-color: #000;
}
.uk-dropdown {
background-color: #444;
}
</style></head><body>
<div class="uk-container">
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">Home</a></li>
<li data-uk-dropdown><a href="">About</a>
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-navbar">
<li><a href="#">Item</a></li>
<li><a href="#">Another item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Another item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Separated item</a></li>
</ul>
</div>
</li>
<li class="uk-parent"><a href="">Contact</a></li>
</ul>
</nav>
<br>
<br>
<br>
<div class="uk-grid">
<div class="uk-width-1-3">
<div class="uk-panel">
<div class="uk-panel-badge uk-badge">NEW</div>
<h3 class="uk-panel-title">This UIKIT Panel</h3>
The look and feel of your site is controlled by a template. You can change the site name, background colour, highlights colour and more by editing the template settings. Click the "Template Settings" in the user menu.
</div>
The boxes around the main content of the site are called modules. You can modify modules on the current page by moving your cursor to the module and clicking the edit link. Always be sure to save and close any module you edit.
You can change some site settings such as the site name and description by clicking on the "Site Settings" link.
More advanced options for templates, site settings, modules, and more are available in the site administrator.
</div>
<div class="uk-width-2-3">
The look and feel of your site is controlled by a template. You can change the site name, background colour, highlights colour and more by editing the template settings. Click the "Template Settings" in the user menu.
The boxes around the main content of the site are called modules. You can modify modules on the current page by moving your cursor to the module and clicking the edit link. Always be sure to save and close any module you edit.
You can change some site settings such as the site name and description by clicking on the "Site Settings" link.
More advanced options for templates, site settings, modules, and more are available in the site administrator.
</div>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/uikit.min.js'></script>
</body></html>
