<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> </li> <li><a href="#">Link 2</a></li> </ul> </div>

/* 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; } #nav { font-size: 10px; } #nav li ul a { padding: 0px 0px 0px 7px; } }