Prototyping a categorical classification system, I'm using Boostrap dropdown buttons in a pill-style navigation. I'm not committed to the pills, so if a different class such as a navbar might work instead, I'll change, though I did already try using navbar and button groups.
I don't know for sure that JavaScript inclusions might not be the problem, but I don't have dropdown.js in my distribution of Bootstrap. Compiling a custom version with only the components I need is way beyond my skill and the scope of the project.
CSS and JavaScript inclusions in head tag:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="jquery.2.1.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
Code for dropdown list:
<div id="taglist">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="dropdown">
<a id="number-list" href="#" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true">
Number<span class="caret"></span>
</a>
<ul id="number-list-menu" class="dropdown-menu" role="menu" aria-labelledby="number-list">
<li><a tabindex="-1" role="menuitem" href="#">One</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Two</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Three</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Four</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Five</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a id="actors-list" href="#" role="button" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">Actors<span class="caret"></span></a>
<ul class="dropdown-menmu" id="actors-list-menu" role="menu" aria-labelledby="actors-list">
<li><a tabindex="-1" role="menuitem" href="#">goats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">children</a></li>
<li><a tabindex="-1" role="menuitem" href="#">dogs</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cows</a></li>
<li><a tabindex="-1" role="menuitem" href="#">donkeys</a></li>
<li><a tabindex="-1" role="menuitem" href="#">horses</a></li>
<li><a tabindex="-1" role="menuitem" href="#">birds</a></li>
<li><a tabindex="-1" role="menuitem" href="#">ducks</a></li>
<li><a tabindex="-1" role="menuitem" href="#">adult humans</a></li>
</ul>
</li>
</ul>
</div>
That code follows the example from the getbootstrap.com JavaScript page as closely as possible, except with my own id names.
PaulL, You have a typo in this line...
<ul class="dropdown-menmu" id="actors-list-menu" role="menu"
Just change the dropdown-menmu to dropdown-menu.
Related
My page is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:layout="http://www.ultraq.net/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
</head>
<body>
<div layout:fragment="content">
<div th:with="rowW='row col-md-9',userNameW='col-md-1',deviceIdW='col-md-4',timestampW='col-md-4',reasonW='col-md-2'">
<div><span th:text="'function='+${function}"></span></div>
<div th:unless="${function} != null and ${function} == 'save'">
<div class="col-md-3 btn btn-primary" th:classappend="rowW">New Card</div>
</div>
<div th:if="${function} != null and ${function} == 'save'">
<div class="col-md-3 btn btn-primary" th:classappend="rowW">New Card</div>
</div>
</div>
</div>
</body>
</html>
If function is null, the layout is displayed. If function is card the layout is not displayed:
For function=null:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/resources/pwstrength.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="navigation">
<div id="navbar-examle" class="navbar navbar-static">
<div class="navbar-inner">
<div id="a" class="container" style="width: auto;">
<a class="brand" href="#" style="float:left;"><img
src="/images/Dadavatar.png"><span>My Project</span></a>
<ul id="b" class="nav" role="navigation">
<li id="c" class="dropdown" style="float:left;">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
<ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>English</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>Administration</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div>
<div><span>function=null</span></div>
<div>
<div class="col-md-3 btn btn-primary rowW">New Card</div>
</div>
</div>
</div>
<br>
<br />
<div id="qr">
<p>
<span>Scan this Barcode using Google Authenticator app on your phone</span>
Android
<span>and</span>
iPhone
</p>
</div>
<div>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>
For function=save:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/resources/pwstrength.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="navigation">
<div id="navbar-examle" class="navbar navbar-static">
<div class="navbar-inner">
<div id="a" class="container" style="width: auto;">
<a class="brand" href="#" style="float:left;"><img
src="/images/Dadavatar.png"><span>My Project</span></a>
<ul id="b" class="nav" role="navigation">
<li id="c" class="dropdown" style="float:left;">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
<ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>English</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>Administration</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div>
<div><span>function=save</span></div>
<div>
<div class="col-md-3 btn btn-primary rowW">New Card</div>
</div>
</div>
</div>
<br>
<br />
<div id="qr">
<p>
<span>Scan this Barcode using Google Authenticator app on your phone</span>
Android
<span>and</span>
iPhone
</p>
</div>
<div>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>
The following is the diff output for the two files:
$ diff thymeleaf*
91c91,92
< <div><span>function=null</span></div>
---
> <div><span>function=save</span></div>
>
95d95
<
$
It actually looks like the fault is not in Thymeleaf but the Chrome browser. Does anyone have any idea how to proceed?
I've tried a number of things but as far as I can tell the only difference in the actual HTML is blank lines.
I checked out the page with chrome inspect and it looks like I have a problem with the css path. The relative paths for the static files fails when the url has extra elements in the path. Of course.
I tried to make a simple dropdown menu with Bootstrap but it appears on the bottom of the page. What's going wrong?
.dropdown-informatie {
overflow: hidden;
float: left;
}
.dropdown-pagina {
float: left;
overflow: hidden;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1> Test </h1>
<p>Test</p>
<div class="dropdown-pagina">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Pagina's <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">Pagina 1</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 2</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
<div class="dropdown-informatie">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Informatie <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">informatie 1</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 2</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
YOUR NEW CODE
Instead of using "dropdown-pagina" as a class you will need to use just dropdown. Then a second and third class for pagina and informatie can be made for specific styling as dropdown is a defined Bootstrap class.
The structure for a Bootstrap 3 drop down is as follows:
div.container {
margin-top: 20px;
}
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
I have my dropdown menu in my _Layout.cshtml and clicking on one of the menu items works fine the first time, for example takes me to http://localhost:52098/Home/ViewTable/Scottish Premiership.
If I click on the URL again, it tries taking me to http://localhost:52098/Home/ViewTable/Home/ViewTable/Scottish Premiership
The navigation Code:
div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Scotland <span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="Home/ViewTable/Scottish Premiership">
Scottish Premiership
</a></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
Scottish Championship
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish First Division
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish Second Division
</a>
</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
England <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Premier League
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Championship
</a>
</li>
</ul>
</li>
</ul>
// #*#Html.MvcSiteMap().Menu(false, true, true, true, true)
#Html.MvcSiteMap().SiteMapPath()*#
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
</div>
</div>
Looks like it's taking a relative path from the one i'm already on + the href on the link, where as what I really want is an absolute path?
Add '/' to the start of your URLs
like /Home/ViewMain/Scottish ChampionShip
And it is always better to use
#Url.Action("MethodName", "Controller")
e.g.
Test
To pass a Parameter in URL
Test
I'm using Bootstrap and I have two dropdowns next to each other, something like this:
|Dropdown1| |Dropdown2|
I have some values in dropdown1 that have lots of characters and I don't want them to disturb the width as soon as they are pressed. How can I do that ?
Here is my dropdown
<div class="dropdown">
<div class="btn-group" id="storeId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript Tutorial</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
When trying to click on a submenu using bootstrap 2.2.2, the submenu will disappear before it can be clicked on a touch device like an iPhone or iPad. Can someone please look at me code and tell me why?
I thought this was supposed to have been fixed in the latest release, so I'm thinking perhaps I'm missing something in my code.
Menu code:
<!-- navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="../home.html">TobyFCU</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="#"><strong>Member Benefits & Services</strong></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="membership/benefitsandservices/55plusclub.html">55 Plus Club</a></li>
<li><a tabindex="-1" href="membership/benefitsandservices/billpay.html">Bill Pay</a></li>
<li><a tabindex="-1" href="#">Direct Deposit</a></li>
<li><a tabindex="-1" href="membership/benefitsandservices/foreigncurrency.html">Foreign Currency Exchange</a></li>
<li><a tabindex="-1" href="membership/benefitsandservices/notary.html">Notary</a></li>
<li><a tabindex="-1" href="membership/benefitsandservices/onlinebanking.html">Online Banking</a></li>
<li><a tabindex="-1" href="#">Payroll Deduction</a></li>
<li><a tabindex="-1" href="#">Toby 24</a></li>
<li><a tabindex="-1" href="#">TextME (SMS Banking)</a></li>
<li><a tabindex="-1" href="#">Western Union Quick Cash</a></li>
<li><a tabindex="-1" href="#">Wire Transfer</a></li>
<li><a tabindex="-1" href="#">Toby Rewards</a></li>
<li><a tabindex="-1" href="#">Other Benefits</a></li>
</ul>
</li>
<li><strong>How to Join</strong></li>
<li><strong>SEGs</strong> <small>(<strong>S</strong>elect <strong>E</strong>mployer <strong>G</strong>roups)</small></li>
<li><strong>Toby Rewards</strong></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Personal<b class="caret"></b>
<ul class="dropdown-menu"role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="#"><strong>Loans</strong></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="personal/loans/signatureloans.html">Signature Loans</a></li>
<li><a tabindex="-1" href="personal/loans/vehicleloans.html">Vehicle Loans</a></li>
<li><a tabindex="-1" href="personal/loans/mortgages.html">Mortgages</a></li>
<li><a tabindex="-1" href="#">Home Equity</a></li>
<li><a tabindex="-1" href="#">Education Loans</a></li>
<li><a tabindex="-1" href="#">Share Certificate Secured Loan</a></li>
<li><a tabindex="-1" href="#">Share Secured Loan</a></li>
<li><a tabindex="-1" href="#">Additional Loans</a></li>
<li><a tabindex="-1" href="#">Loan Insurance</a></li>
</ul>
</li>
<li><strong>Share Draft Checking</strong></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#"><strong>Savings & CDs</strong></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Share Savings</a></li>
<li><a tabindex="-1" href="#">Flex/Sub Account</a></li>
<li><a tabindex="-1" href="#">Club Accounts</a></li>
<li><a tabindex="-1" href="#">Money Market</a></li>
<li><a tabindex="-1" href="personal/savingsandcds/sharecertificates.html">Share Certificates</a></li>
<li><a tabindex="-1" href="#">IRA Certificate</a></li>
<li><a tabindex="-1" href="#">IRA (Traditional & Roth)</a></li>
<li><a tabindex="-1" href="#">Certificates</a></li>
</ul>
</li>
<li><strong>Credit Card</strong></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#"><strong>Youth</strong></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Student Loans</a></li>
<li><a tabindex="-1" href="#">Youth Checking</a></li>
<li><a tabindex="-1" href="#">Youth Visa Check Card</a></li>
<li><a tabindex="-1" href="#">Student Visa Credit Card</a></li>
<li><a tabindex="-1" href="#">Toby's Troops</a></li>
<li><a tabindex="-1" href="#">Toby Teens</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a tabindex="-1" href="#"><strong>Retirement</strong></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Investment Services</a></li>
<li><a tabindex="-1" href="#">IRAs</a></li>
<li><a tabindex="-1" href="#">55 Plus Club</a></li>
</ul>
</li>
<li><strong>ATMs</strong></li>
<li><strong>Rates</strong></li>
<li class="nav-header">24 Hour Services</li>
<li class="divider"></li>
<li>Online Banking</li>
<li>Toby24</li>
<li>TextME</li>
<li>Deluxe Personal Checks Reorder</li>
<li>ATMs</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Business<b class="caret"></b>
<ul class="dropdown-menu"role="menu" aria-labelledby="dLabel">
<li><strong>Loans</strong></li>
<li><strong>Share Draft Checking</strong></li>
<li><strong>Share Savings</strong></li>
<li><strong>Credit Card</strong></li>
<li><strong>Certificates</strong></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#"><strong>Services</strong></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Merchant Services</a></li>
<li><a tabindex="-1" href="#">Payroll Services</a></li>
</ul>
</li>
<li><strong>Rates</strong></li>
<li class="nav-header">24 Hour Services</li>
<li class="divider"></li>
<li>Online Banking</li>
<li>Toby24</li>
<li>TextME</li>
<li>Deluxe Personal Checks Reorder</li>
<li>ATMs</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
About Us<b class="caret"></b>
<ul class="dropdown-menu"role="menu" aria-labelledby="dLabel">
<li><strong>Our Company</strong></li>
<li><strong>Careers</strong></li>
<li><strong>Blog</strong></li>
<li><strong>Locations</strong></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Contact Us<b class="caret"></b>
<ul class="dropdown-menu"role="menu" aria-labelledby="dLabel">
<li><strong>Contact Information</strong></li>
<li><strong>Locations</strong></li>
<li><strong>ATMs</strong></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div> <!-- /navbar -->