Tonight I decided to give Bootstrap a try (only been doing CSS/HTML for about two weeks), but I'm running into a problem. For whatever reason, it doesn't seem like my HTML doc is linking to the Bootstrap stylesheet. I used one of their dropdown code snippets, but the end result isn't stylized. Can someone see if I'm doing something wrong? Below is my HTML code.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</body>
</html>
Are all the files in the right folders? You are using relative url:s, can be confusing if you just started to code. How is your folder structure? Are the index.html and the css folder in the same directory?
You Need to look at the file structure of how bootstrap files are added:
http://twitter.github.com/bootstrap/getting-started.html#file-structure
try add "style="display: block; position: static; margin-bottom: 5px; *width: 180px"
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
Related
When I am working with MVC my links does not appear. Code works well in CSS/HTML editor but the dropdown does not work while I test it on MVC layout.
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #333;text-align: center;">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Books
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Url.Action("New", "MyTemplate")">New books</a>
<a class="dropdown-item" href="#Url.Action("Recommend", "MyTemplate")">Recommended books</a>
<a class="dropdown-item" href="#Url.Action("Available", "MyTemplate")">Available books</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#Url.Action("Genres", "MyTemplate")">Genres</a>
<a class="dropdown-item" href="#Url.Action("Formats", "MyTemplate")">Formats</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("About", "MyTemplate")">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Contact", "MyTemplate")">Contact</a>
</li>
</ul>
</div>
Please note that all links work properly except one's in dropdown(New, Recommend, Available, Genres, Formats).
Head contains scripts and bootstrap/css style files:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" initial-scale="1" shrink-to-fit="no" />
<title>#ViewBag.Title</title>
#RenderSection("head", false)
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css">
<link rel="stylesheet" type="text/css" href="~/Content/style.css">
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
</head>
#Edit
Solution:
I had to download bootstrap 4.5. I have used 4.5 to style it but MVC had older version and this made problems. Solution is to download all scripts needed by bootstrap 4.5 and attaching CDN of bootstrap 4.5 :)
The following is my code
<ul class="navbar-nav" style="margin-left: 16%;">
<li class="nav-item">
<!-- <button style="background-color: #009688; height: 25px;"> -->
<a class="nav-link" style="color: white; font-weight: 500;" href="home.php">Home</a>
<!-- </button> -->
</li>
<li class="nav-item">
<a class="nav-link" style="color: white; font-weight: 500;" href="about.php">About Us</a>
</li>
<li class="nav-item dropdown nav-mod">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white; font-weight: 500;">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="panchakarma.php">Panchakarma Therapies</a></li>
<li><a class="dropdown-item" href="ayurveda_medicines.php">Ayurveda Medicines</a></li>
<li><a class="dropdown-item" href="diet_consultation.php">Diet Consultation</a></li>
<li><a class="dropdown-item" href="meditation.php">Meditation</a></li>
<li><a class="dropdown-item" href="therapy_yoga.php">Therapy Yoga</a></li>
<li><a class="dropdown-item" href="physiotherapy.php">Physiotherapy</a></li>
<li><a class="dropdown-item" href="garbh_sanskar.php">Garbh Sanskar</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Special Treatments</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dhupana_chikista.php">Dhupana Chikista</a></li>
<li><a class="dropdown-item" href="kumkumadi_facial.php">Kumkumadi Facial</a></li>
<li><a class="dropdown-item" href="rejuvation_treatment.php">Rejuvation Treatment</a></li>
<li><a class="dropdown-item" href="relaxation_treatment.php">Relaxation Treatment</a></li>
<li><a class="dropdown-item" href="suvarna_prashan.php">Suvarna Prashan</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="other_facility.php">Other Facilities we provide</a></li>
</ul>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="online_consultation.php">Online Consultation</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" style="color: black; font-weight: bold;" href="packages.php">Packages</a>
</li> -->
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="courses.php">Courses</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" style="color: black; font-weight: bold;" href="products.php">Products</a>
</li> -->
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="career.php">Career</a>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" style="color: white; font-weight: 500;" href="contact_us.php">Contact Us</a>
</li>
</ul>
I want to make this on like as shown below in the image(Header)
enter image description here
If anyone knows about using CSS please let me help.
The following image shows from my website look.enter image description here
I want to make my header as shown in first image.
You can do it by using the same line-height for ul, li and a. While you will give the same height for ul, li and a, then it will display the hover height like the menu item height.
nav.navbar.navbar-default {
background: #288a90;
}
ul.nav.navbar-nav {
background: #288a90;
}
.navbar,
.navbar ul {
line-height: 65px;
}
.navbar ul li a {
line-height: 65px;
color: white !important;
font-weight: 500;
}
.navbar ul li a:hover {
line-height: 65px;
background-color: #fff !important;
color: #288a90 !important;
}
.dropdown-menu {
background-color: #288a90 !important;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav" style="margin-left: 16%;">
<li class="nav-item">
<a class="nav-link" href="home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About Us</a>
</li>
<li class="nav-item dropdown nav-mod">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white; font-weight: 500;">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="panchakarma.php">Panchakarma Therapies</a></li>
<li><a class="dropdown-item" href="ayurveda_medicines.php">Ayurveda Medicines</a></li>
<li><a class="dropdown-item" href="diet_consultation.php">Diet Consultation</a></li>
<li><a class="dropdown-item" href="meditation.php">Meditation</a></li>
<li><a class="dropdown-item" href="therapy_yoga.php">Therapy Yoga</a></li>
<li><a class="dropdown-item" href="physiotherapy.php">Physiotherapy</a></li>
<li><a class="dropdown-item" href="garbh_sanskar.php">Garbh Sanskar</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Special Treatments</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dhupana_chikista.php">Dhupana Chikista</a></li>
<li><a class="dropdown-item" href="kumkumadi_facial.php">Kumkumadi Facial</a></li>
<li><a class="dropdown-item" href="rejuvation_treatment.php">Rejuvation Treatment</a></li>
<li><a class="dropdown-item" href="relaxation_treatment.php">Relaxation Treatment</a></li>
<li><a class="dropdown-item" href="suvarna_prashan.php">Suvarna Prashan</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="other_facility.php">Other Facilities we provide</a></li>
</ul>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" href="career.php">Career</a>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" href="contact_us.php">Contact Us</a>
</li>
</ul>
</nav>
</body>
</html>
you're just putting the background on the anchor (a) tag right?
you probably need to put in the li tag, but i'm not sure, if it dont work please edit your question and put the css file too or use the codepen
I have done some changes, some unnecessary css and made css according to bootstrap to make sure when you add your css file (after bootstrap css file) you don't have to use !important
nav.navbar.navbar-default {
background: #288a90;
}
ul.nav.navbar-nav {
background: #288a90;
}
.navbar-default .navbar-nav>li>a {
line-height: 65px;
color: #fff !important;
font-weight: 500;
}
.navbar-default .navbar-nav>li>a:hover {
background-color: #fff !important;
color: #288a90 !important;
}
.dropdown-menu {
background-color: #288a90 !important;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav" style="margin-left: 16%;">
<li class="nav-item">
<a class="nav-link" href="home.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About Us</a>
</li>
<li class="nav-item dropdown nav-mod">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: white; font-weight: 500;">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="panchakarma.php">Panchakarma Therapies</a></li>
<li><a class="dropdown-item" href="ayurveda_medicines.php">Ayurveda Medicines</a></li>
<li><a class="dropdown-item" href="diet_consultation.php">Diet Consultation</a></li>
<li><a class="dropdown-item" href="meditation.php">Meditation</a></li>
<li><a class="dropdown-item" href="therapy_yoga.php">Therapy Yoga</a></li>
<li><a class="dropdown-item" href="physiotherapy.php">Physiotherapy</a></li>
<li><a class="dropdown-item" href="garbh_sanskar.php">Garbh Sanskar</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Special Treatments</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dhupana_chikista.php">Dhupana Chikista</a></li>
<li><a class="dropdown-item" href="kumkumadi_facial.php">Kumkumadi Facial</a></li>
<li><a class="dropdown-item" href="rejuvation_treatment.php">Rejuvation Treatment</a></li>
<li><a class="dropdown-item" href="relaxation_treatment.php">Relaxation Treatment</a></li>
<li><a class="dropdown-item" href="suvarna_prashan.php">Suvarna Prashan</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="other_facility.php">Other Facilities we provide</a></li>
</ul>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" href="career.php">Career</a>
</li>
<li class="nav-item nav-mod">
<a class="nav-link" href="contact_us.php">Contact Us</a>
</li>
</ul>
</nav>
</body>
</html>
Can anyone suggest how to adjust submenu(s) parallel to main menu.(without using negative margin-top)
Need output like this
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
.dropdown-submenu {
position: relative;
}
All you need to do, is remove that. Then the outer div container will become the reference point for the absolute positioning of those elements (because it is now the closest positioned ancestor.)
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
/*
.dropdown-submenu {
position: relative;
}
*/
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I am using Chrome on OS X, and when I do a plain vanilla Bootstrap test it doesn't work.
I use the regular v2.3.2 files downloaded from here, and I re-created a vanilla test.
This is how my index.html looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('.dropdown-toggle').dropdown()
</script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h2>Hello</h2>
<p>There should be a dropdown right below this paragraph.</p>
<div class="row">
<div class="span12">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>
</html>
When I do this, this is what I see:
Yet in the source, I see this outputted:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h2>Hello</h2>
<p>There should be a dropdown right below this paragraph.</p>
<div class="row">
<div class="span12">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>
</html>
Why does this not work?
In addition to including the dropdown trigger before the unordered list (the <a>) you've also forgotten to wrap your menu with an element that has the .dropdown class, e.g.
<div class="row">
<div class="span12">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
Example: http://jsfiddle.net/BVmUL/73/
With adding a 'a' tag before the ul, like write in http://getbootstrap.com/2.3.2/javascript.html#dropdowns
<div class="row">
<div class="span12">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
I'm trying to make multilevel menu based on twitter bootstrap.
http://jsfiddle.net/W3Zj8/
Here is the HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Twitter Bootstrap Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="container">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">Sub with sub</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">SubSub1</a></li>
<li><a tabindex="-1" href="#">SubSub2</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I can't figure out why the submenu is hidden untill I hover on "More options"
But then I see directky the second level menu.
While I expect (and would like) to see it appearing only when I hover on "Sub with sub" submenu item.
Do you have a suggestion?
Add to your css next code:
.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; }
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }
Apparently it is not possible "out of the box" ; you'll have to make CSS modifications by yourself.
See this thread for more information : Twitter Bootstrap Multilevel Dropdown Menu
There is a demo link at the end of the best response, which seems to corresponds at what you are waiting for !
Florian