Bootstrap Snippet Dropdown hover with triangle using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dropdown hover with triangle"
Bootstrap 3.3.0 Snippet by hardiktrivedi

Related: See More

Questions / Comments:

"Dropdown hover with triangle" Bootstrap 3.3.0 Snippet by hardiktrivedi

Related: See More

Questions / Comments:

"Dropdown hover with triangle"
Bootstrap 3.3.0 Snippet by hardiktrivedi