The Html Code is :
- <div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse"
- data-target="#example-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="#">eService</a>
- </div>
- <div class="collapse navbar-collapse" id="example-navbar-collapse">
- <ul class="nav navbar-nav">
- <li><a href="index.html">Home</a></li>
- <li><a href="#about">About</a></li>
- <li><a href="contact.html">Contact</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- Services
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#">Service1</a></li>
- <li><a href="#">Service2</a></li>
- <li><a href="#">Service3</a></li>
-
- </ul>
- </li><!-- dropdown -->
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- Events
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#">Event1</a></li>
- <li><a href="#">Event2</a></li>
- <li><a href="#">Event3</a></li>
- <li><a href="#">Event4</a></li>
- <li><a href="#">Event5</a></li>
- </ul>
- </li><!-- dropdown -->
- </ul><!-- /.nav -->
- </div>
- </div>
The Css is
- #custom-nav {
- -webkit-box-shadow: 10px 20px 20px #0072BA;
- -moz-box-shadow: 20px 20px 20px #0072BA;
- box-shadow: 20px 20px 20px #0072BA;
- z-index:999;
- }
And Last the Display output: