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>