Dropdown menu problem
Dropdown menu problem
Hii,
I am trying to make a navigation bar with bootstrap classes but unable to do this, I want a dropdown menu where I want a sub menu under a button. please help me
below is my entire code..
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="pricing.html">Pricing</a></li>
<li class="dropdown-submenu">
<a href="#">Web Designing</a>
<ul class="dropdown-menu">
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-item.html">Blog Single</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>