I am trying to make a 3-level collapsing navbar menu for Bootstrap, but I can't open the third level.
This is the two level menu which I have:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<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>
<div class="nav-collapse">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
I thought something like this would work:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<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>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li class="item-148 dropdown parent">
Learn more <b class="caret-right"></b>
<ul class="dropdown-menu">
<li class="item-149">The Software</li>
<li class="item-150">The Project</li>
<li class="item-151">The Leadership</li>
<li class="item-152">Open Source Matters</li>
</ul>
</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
But that's not working.
Bootstrap 2.3.x and later supports the dropdown-submenu..
<ul class="dropdown-menu">
<li>Login</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
<li>Logout</li>
</ul>
Working demo on Bootply.com
Bootstrap 3 dropped native support for nested collapsing menus, but there's a way to re-enable it with a 3rd party script. It's called SmartMenus. It means adding three new resources to your page, but it seamlessly supports Bootstrap 3.x with multiple levels of menus for nested <ul>/<li> elements with class="dropdown-menu". It automatically displays the proper caret indicator as well.
<head>
...
<script src=".../jquery.smartmenus.min.js"></script>
<script src=".../jquery.smartmenus.bootstrap.min.js"></script>
...
<link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/>
...
</head>
Here's a demo page: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html
Related
I'm trying to integrate a custom theme for bootstrap
the theme i want to use is bootswatch
the only problem i'm currently facing is that the dropdown menu in the navigation bar is not working.
this is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
<html>
<head>
<title>Login</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet">
<script src="https://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>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I use bootstrap 4.3.1 instead of 3.3.7 to fix this problem.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
Maybe you can try it.
my navbar
Hi, this is the code that i have used
<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="">
<div class="nav navbar-nav navbar-left" style="margin-top:15px;">
<img src="images/logostack.gif" alt="logo">
</div>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Something</li>
<li>Meet the Experts</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Shortcomings</li>
<li>Complications</li>
<li>Stakeholders</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Statistics </li>
<li>Profile Patient</li>
<li>Burden Economical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Management Approach</li>
<li>Algorithms & Protocols</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Non Critical</li>
<li>Critical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Modules</li>
<li>Videos </li>
<li>Images </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Post your Query</li>
<li>Experts Council</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
I want to place the menu below the logo without using margin on the ul list (since that will spoil the mobile responsiveness and collapse property of bootstrap) .. instead i want to do it with using row and column functions of bootstrap but since im new to it im not able to make it.. any sort of help really appreciated.. thanks in advance..
I've searched and maybe this will help.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
Link to article:
Center content in responsive bootstrap navbar
You can still use the margin property to achieve this, however if you want to eliminate the changed margin for collapsed menu bar, you can use CSS Media queries to change the margin back to zero. Ofcourse, there will be a certain screen size, where the navbar changes to collapsable navbar so you will need Media Queries.
#media only screen and (max-width:--px)
{
//your nav-bar code goes here
}
You have to take a row top of the navbar.
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
// Your navbar code
</nav>
</div>
Full code according to your question:
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" >
<!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
About Something
</li>
<li>
Meet the Experts
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Shortcomings
</li>
<li>
Complications
</li>
<li>
Stakeholders
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Statistics
</li>
<li>
Profile Patient
</li>
<li>
Burden Economical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Management Approach
</li>
<li>
Algorithms & Protocols
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Non Critical
</li>
<li>
Critical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Modules
</li>
<li>
Videos
</li>
<li>
Images
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Post your Query
</li>
<li>
Experts Council
</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
</nav>
</div>
You have to know about Bootstrap Grid.
In bootstrap3 I am trying to remove horizontal scroll bar in mobile it looks fine in desktop view but in mobile view the horizontal bar is shown I read that horizontal bar comes due to container-fluid so to I used tag but it is not work
here is the code
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
You can use:
overflow:hidden;
in css or declarate it deirect in the html:
<style type="text/css">
.container-fluid {
overflow-x:hidden;
overflow-y:hidden;
overflow:hidden;
}
</style>
I hope it helps
Everything looks fine to me. You probably have some custom CSS doing something wrong. I even tried excluding "viewport" meta tag, still doesn't show overflow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I have created a navbar containing a dropdown menu. When i click header, simply nothing happens.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand icon-github" href="/"> </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toogle="dropdown" role="button" aria-expanded="false">
Customers
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>All Customers</li>
<li><Recently added</li>
<li>Today's appointments</li>
<li class="divider"></li>
<li>Create new customer</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
There is no error in the console.
It's a simple typo: You have data-toogle instead of data-toggle.
It should work with this:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Customers
<span class="caret"></span>
</a>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand icon-github" href="/"> </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Coustomers <b class="caret"></b>
<ul class="dropdown-menu">
<li>All Customers</li>
<li><Recently added</li>
<li>Today's appointments</li>
<li class="divider"></li>
<li>Create new customer</li>
</ul>
</li>
</ul>
</div>
</div>
If I am not wrong this is what you are looking for..
This is the partial view that generates the menu for the site.
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav" >
#foreach (var menu in Model)
{
<li class="dropdown">
#menu.DisplayName
#foreach (var menuitem in menu.MenuItems)
{
<ul class="dropdown-menu" >
<li class="dropdown">#Html.ActionLink(menuitem.DisplayName, menuitem.ActionName, menuitem.ControllerName, new { tabindex = "-1" })</li>
</ul>
}
</li>
}
</ul>
</div>
The menus can be visible and actually the dropdown menus are also created in the HTML as shown below
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="dropdown open">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
In out put is shown as bellow in the GUI
What is the issue with regard to this.
Make sure you have included the bootstrap.js file on that page.
Your markup is a bit off. The <li> in your dropdown menu should not have the "dropdown" class
Here is the jsFiddle -> http://jsfiddle.net/abrudtkuhl/GYSuY/
Here's markup that works, based on your example
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li> <a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>