Hi again.
Im playing with the Bootstrap menu examples found at w3scools.com
I see how to make a simple drop down menu with one generation child items but need grandchild items too, or even more generations. I've tried several ways but it won't work. Seems like Bootstrap is made for only one single drop down as I haven't found any example of an expanded menu anywhere.
Here is the code example I found added with my own code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tab with Dropdown Menu</h2>
<ul class="nav nav-tabs" role="tablist">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Tutorials <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
---My code begins here---
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
More items <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
</li>
---My code ends here---
</ul>
</li>
</ul>
</div>
</body>
</html>
The menu items does not contain anything but thats not the issue here.
Does anyone have any idea if its possible to make an expanded menu here?
Best regards!
KjellO
Im playing with the Bootstrap menu examples found at w3scools.com
I see how to make a simple drop down menu with one generation child items but need grandchild items too, or even more generations. I've tried several ways but it won't work. Seems like Bootstrap is made for only one single drop down as I haven't found any example of an expanded menu anywhere.
Here is the code example I found added with my own code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tab with Dropdown Menu</h2>
<ul class="nav nav-tabs" role="tablist">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Tutorials <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
---My code begins here---
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
More items <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
</li>
---My code ends here---
</ul>
</li>
</ul>
</div>
</body>
</html>
The menu items does not contain anything but thats not the issue here.
Does anyone have any idea if its possible to make an expanded menu here?
Best regards!
KjellO