"Dropdown hover with triangle"
Bootstrap 3.3.0 Snippet by hardiktrivedi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <nav> <ul> <li> <a href="#">Dropdown1</a> <ul> <li><a href="#">Option1</a></li> <li><a href="#">Option2 A Long One</a></li> <li><a href="#">Option3</a></li> </ul> </li> <li> <a href="#">Dropdown2</a> <ul> <li><a href="#">Option1</a></li> <li><a href="#">Option2</a></li> <li><a href="#">Option3</a></li> </ul> </li> <li> <a href="#">Dropdown3</a> <ul> <li><a href="#">Option1</a></li> <li><a href="#">Option2</a></li> <li><a href="#">Option3</a></li> </ul> </li> </ul> </nav> </div>
html { text-align: center; } nav { width: 100%; height: auto; background-color: #BB0927; } nav ul, nav li { list-style: none; padding: 0; margin: 0; } nav a { color: #fff; text-decoration: none; } nav > ul > li { display: inline-block; position: relative; margin: 1em; } nav > ul > li > a { padding-bottom: 5px; } nav > ul > li > ul { display: none; position: absolute; background-color: #BB0927; top: 40px; padding: 10px 0; } nav > ul > li > ul > li { white-space: nowrap; padding: 7px 15px; } nav > ul > li > ul > li > a { display: block; } nav > ul > li > ul > li > a:hover { text-decoration: underline; } nav > ul > li > ul:after { position: absolute; left: 50%; margin-left: -10px; top: -8px; width: 0; height: 0; content:''; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #BB0927; } nav > ul > li:hover > ul { display:block; }

Related: See More


Questions / Comments: