<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<!-- Option One -->
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Download It <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-8">
<ul>
<li class="dropdown-header"></li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/OverdriveLogo.png" style="width: 200px; padding-top:10px;" /></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/ZinioLogo.png" style="width: 180px;"/></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/HooplaLogo.png" style="width: 185px;" /></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/AlexLogo.png" style="width: 230px;" /></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"></li>
<li class="DownExtra">
<div align="center" class="WiFiText">
<p class="navdownp"> <span class="MWF1">"Check out" the internet<br />at Bexley Public Library<br />with a Mobile WiFi Hotspots.</span></p>
<p class="navdownp"><span class="MWF2">These mobile hotspots provide unlimited data with a portable, reliable, 24-hour, high-speed internet connection that patrons can take with them on family road trips, research projects, job searches and wherever else they might want to go.</span></p>
<p class="navdownp"><span class="MWF3">Find out how to<br />check one out here.</span></p>
</div>
</li>
<li>
<div align="center" class="HelpText">
<p class="HelpStyleA"><span style="font-weight: bold; font-size:18px">Need help with <br /> eBooks & digital media?<br /></span>
Overdrive Help • Hoopla Help<br />
Zinio Help • Alexander Street Help</p>
<p class="HelpStyleB"><span><i>Still have questions? Ask Us!</i></span></p>
</div>
</li>
</ul>
</li>
</ul>
</li>
<!-- Option One -->
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Download It <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-8">
<ul>
<li class="dropdown-header"></li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/OverdriveLogo.png" style="width: 200px; padding-top:10px;" /></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/ZinioLogo.png" style="width: 180px;"/></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/HooplaLogo.png" style="width: 185px;" /></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
<li class="ReDes"><div class="ReImage"><img src="http://bpltestsite.com/sites/all/themes/bplflat/assets/images/AlexLogo.png" style="width: 230px;" /></div>
<div><p class="Resource">
<span>With OverDrive, you can borrow and enjoy free eBooks, audiobooks, and more. Choose from thousands of titles. All you need to get started is an internet connection and a library card. </span>
<span class="GOLink">GO</span></p></div> </li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"></li>
<li class="DownExtra">
<div align="center" class="WiFiText">
<p class="navdownp"> <span class="MWF1">"Check out" the internet<br />at Bexley Public Library<br />with a Mobile WiFi Hotspots.</span></p>
<p class="navdownp"><span class="MWF2">These mobile hotspots provide unlimited data with a portable, reliable, 24-hour, high-speed internet connection that patrons can take with them on family road trips, research projects, job searches and wherever else they might want to go.</span></p>
<p class="navdownp"><span class="MWF3">Find out how to<br />check one out here.</span></p>
</div>
</li>
<li>
<div align="center" class="HelpText">
<p class="HelpStyleA"><span style="font-weight: bold; font-size:18px">Need help with <br /> eBooks & digital media?<br /></span>
Overdrive Help • Hoopla Help<br />
Zinio Help • Alexander Street Help</p>
<p class="HelpStyleB"><span><i>Still have questions? Ask Us!</i></span></p>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
font-family: 'Source Sans Pro', 'sans-serif';
background:#f0f0f0;
}
.navbar-nav>li>.dropdown-menu {
margin-top:20px;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.navbar-default .navbar-nav>li>a {
width:200px;
font-weight:bold;
}
.mega-dropdown {
position: static !important;
width:100%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 285px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 283px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight:bold;
}
.mega-dropdown-menu form {
margin:3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.ReImage
{
width: 250px;
height: 70px;
float: left;
}
.ReDes
{
padding: 20px;
}
.DownExtra
{
padding-bottom:10px;
}
.Resource
{
font-family:"Source Sans Pro", sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
}
.HelpStyleA
{
color:#ffffff;
font-family:"Source Sans Pro", sans-serif;
font-size:16px;
font-style:normal;
font-weight:normal;
text-decoration:none;
}
.HelpStyleB
{
color:#ffffff;
font-family:"Source Sans Pro", sans-serif;
font-size:16px;
font-style:italic;
font-weight:normal;
text-decoration:none;
line-height:.2
}
.GOLink
{
color:#ff0000;
font-family:"Source Sans Pro", sans-serif;
font-size:18px;
font-style:normal;
font-weight:900;
line-height: 13px;
}
.MWFX
{
font-family:"Source Sans Pro", sans-serif;
font-size:40px;
font-style:normal;
font-weight:900;
}
.MWFY
{
font-family:"Source Sans Pro", sans-serif;
font-size:40px;
font-style:normal;
}
.MWF1
{
font-family:"Source Sans Pro", sans-serif;
font-size:18px;
font-style:italic;
font-weight:300;
}
.MWF2
{
font-family:"Source Sans Pro", sans-serif;
font-style:normal;
font-size:14px;
font-weight:300;
}
.MWF3
{
color:#ff0000;
font-family:"Source Sans Pro", sans-serif;
font-size:22px;
font-style:normal;
font-weight:600;
line-height:90%;
}
.BotTextA
{
font-family:"Source Sans Pro", sans-serif;
font-size:33px;
font-style:italic;
font-weight:300;
}
.BotTextB
{
font-family:"Source Sans Pro", sans-serif;
font-size:33px;
font-style:normal;
font-weight:normal;
text-decoration:underline;
}
.WiFiText
{
background:lightGrey;
border-radius: 15px 15px 15px 15px;
overflow:hidden;
padding: 5px;
}
.HelpText
{
background:#5b5b5b;
border-radius: 15px 15px 15px 15px;
overflow:hidden;
padding: 10px;
}
jQuery(document).on('click', '.mega-dropdown', function(e) {
e.stopPropagation()
})
