<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 ----------> <nav class="navbar navbar-inverse"> <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> <a class="navbar-brand" href="#"><font size=5px color="white">I Want To...</font></a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apply<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Licenses</li> <li><a href="#">Liquor License</a></li> <li><a href="#">Food Cart License</a></li> <li><a href="#">Pet License</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Permits</li> <li><a href="#">Parking Permit - new</a></li> <li><a href="#">Parking Permit - renewal</a></li> <li><a href="#">Building Permit</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Jobs & Internships</li> <li><a href="#">Current opportunities</a></li> <li><a href="#">Internships</a></li> <li><a href="#">Articling opportunities</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Volunteering Opportunities</li> <li><a href="#">Youth Health Action Network***</a></li> <li><a href="#">Toronto Greeters</a></li> <li><a href="#">City-run events</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Grants & Loans</li> <li><a href="#">Financial aid for Non-profits</a></li> <li><a href="#">Loans for Paying Rent</a></li> <li><a href="#">Grants for starting your own business</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Rebates & Exemptions</li> <li><a href="#">Vacancy Property tax rebate</a></li> <li><a href="#">Water bill rebates</a></li> <li><a href="#">Noise exemption</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Subsidies & Supports</li> <li><a href="#">Child care fee subsidy</a></li> <li><a href="#">In home care and support</a></li> <li><a href="#">Basement flooding subsidy</a></li> <li><a href="#">more...</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Register<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Programs & Memberships</li> <li><a href="#">Leisure or Recreation programs</a></li> <li><a href="#">Sports & Recreation account</a></li> <li><a href="#">Family Support programs</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Events</li> <li><a href="#">Public hearings for bylaw reviews</a></li> <li><a href="#">Government elections</a></li> <li><a href="#">Job fairs</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="dropdown-header">Training Courses</li> <li><a href="#">CPR & First-aid</a></li> <li><a href="#">Language courses</a></li> <li><a href="#">Can-Bike saftey courses</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Clinics</li> <li><a href="#">Newcomer health services for pregnant and new mothers</a></li> <li><a href="#">Spay/Neuter mobile clinics</a></li> <li><a href="#">Breastfeeding clinics</a></li> <li><a href="#">more...</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Request<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Inspections</li> <li><a href="#">Fire inspection</a></li> <li><a href="#">Building inspection</a></li> <li><a href="#">Infrastructure inspection</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Reviews</li> <li><a href="#">Business license review</a></li> <li><a href="#">Community safety audit</a></li> <li><a href="#">Municipal licensing & tribunal hearing</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Referrals</li> <li><a href="#">Employment Program</a></li> <li><a href="#">At-home medical care</a></li> <li><a href="#">Emergency shelter</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Documents & Artefacts</li> <li><a href="#">Inspection report</a></li> <li><a href="#">Utility tax certificate</a></li> <li><a href="#">Building plans</a></li> <li><a href="#">more...</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pay<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Fines</li> <li><a href="#">Provincial offences</a></li> <li><a href="#">Parking ticket</a></li> <li><a href="#">Toronto Fire services charges & fees</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Bills</li> <li><a href="#">Property Taxes</a></li> <li><a href="#">Solid Waste/Water/Utility Bill</a></li> <li><a href="#">more...</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Book<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Civic Centres & Facilities</li> <li><a href="#">City Hall</a></li> <li><a href="#">York Recreation Centre</a></li> <li><a href="#">Metro Hall</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Museums & Heritage Centres</li> <li><a href="#">Colborne Lodge</a></li> <li><a href="#">Mackenzie House</a></li> <li><a href="#">The Market Gallery</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Tickets</li> <li><a href="#">Ferry Ticket</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Tours</li> <li><a href="#">Free tour of Toronto</a></li> <li><a href="#">Tour of a fire station</a></li> <li><a href="#">Study Tour for dignitaries</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Appointments</li> <li><a href="#">Business startup consultation</a></li> <li><a href="#">Speak to a city committee</a></li> <li><a href="#">Development planning consultation</a></li> <li><a href="#">more...</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Report<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Issues</li> <li><a href="#">Waste related issues</a></li> <li><a href="#">Animal incident</a></li> <li><a href="#">Construction noise</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Maintenance & Repairs</li> <li><a href="#">Pothold repair</a></li> <li><a href="#">Tree removal</a></li> <li><a href="#">Connection of water/sewer</a></li> <li><a href="#">more...</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Complaints, Comments & Suggestions</li> <li><a href="#">Construction complaint</a></li> <li><a href="#">Appeals about financial assistance decisions</a></li> <li><a href="#">Human rights issues</a></li> <li><a href="#">more...</a></li> <li class="divider"></li> <li class="dropdown-header">Claims</li> <li><a href="#">Flood Claims</a></li> <li><a href="#">Pothole Claims</a></li> <li><a href="#">Fallen Trees & Branches Claims</a></li> <li><a href="#">more...</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; } .mega-dropdown { position: static !important; font-size: 20px; } .mega-dropdown-menu { padding: 0px 0px; width: 100%; box-shadow: none; font-weight: bold; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 20px; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: square; color: #673232; } .mega-dropdown-menu > li > ul > li > a { display: block; color: #673232; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #ff3546; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .mega-dropdown-menu .dropdown-showcased { font-size: 20px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .carousel-control { width: 30px; height: 30px; top: -35px; } .left.carousel-control { right: 30px; left: inherit; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd; }

$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); $(this).toggleClass('open'); } ); });