"menu submenu"
Bootstrap 4.1.1 Snippet by prabuanan

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

Related: See More


Questions / Comments: