Bootstrap Snippet menu submenu 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
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <div id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li style="
    /* width: 22%; */
    /* text-align: left; */
"><a href="#">Menu 1</a>
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                            <li><a href="#">Submenu</a>
                                <ul style="
    ">
                                    <li><a href="#">Link1</a></li>
                                    <li><a href="#">Link2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Menu 2</a>
                        <ul>
                            <li><a href="#">Link1</a></li>
                            <li><a href="#">Submenu1</a>
                                <ul>
                                    <li><a href="#">Link1</a></li>
                                    <li><a href="#">Link2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Link2</a></li>
                        </ul>
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
/* start writing all your rules starting with #nav selector */
/* background color for fourth element: #ffd9b3; */
#nav ul li {
    float: left;
    width:20%;
}
#nav > ul > li:hover > ul:nth-child(2)
{
    display: block;
     white-space: nowrap;
}
#nav  li:hover > ul
{
    display: block;
}
#nav ul li:nth-child(2) ul li:nth-child(4) ul
{
position: absolute;top: 159px;
    left: 40%;width: auto;
}
#nav ul li:nth-child(4) ul li:nth-child(2) ul
{
position: absolute;top: 80px;
    left: 80%;width: auto;
}
#nav li a:nth-child(4)
{
background-color: #ffd9b3;
}
@media only screen and (max-width: 600px) {
    #nav li a {
        padding: 0px 0px;
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"menu submenu"
Bootstrap 4.1.1 Snippet by prabuanan

Related: See More

Questions / Comments:

"menu submenu" Bootstrap 4.1.1 Snippet by prabuanan

Related: See More

Questions / Comments:

"menu submenu"
Bootstrap 4.1.1 Snippet by prabuanan