Pure css dropdown menu's submenu with scroller not showing the multidropdown menu

Question

I am using the pure css dropdown menu in one of my project. The submenu contains the multiple lists just like in the snippet:

 /*Set the parent <li>'s CSS position property to 'relative'.*/ ul { list-style: none; padding: 0; margin: 0; background: #ce4040; border: 1px solid #e08d8d; } ul>li { border-left: 1px solid #e08d8d; } ul li { display: block; position: relative; float: left; background: #ce4040; border-bottom: 1px solid #e08d8d; } /*The CSS to hide the sub menus. */ li ul { display: none; } ul li a { display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff; } ul li a:hover { background: #ce4040; } /*Displays the dropdown menu on hover.*/ li:hover > ul { display: block; position: absolute; } li:hover li { float: none; } li:hover a { background: #ce4040; } li:hover li a:hover { background: #962e2e; color: #fff; } .main-navigation li ul li { border-top: 0; } /*Displays second level dropdown menus to the right of the first level dropdown menu.*/ ul ul ul { left: 100%; top: 0; } /*Simple clearfix.*/ ul:before, ul:after { content: " "; /* 1 */ display: table; /* 2 */ } ul:after { clear: both; }

 <ul class="main-navigation"> <li><a href="#">Home</a> </li> <li><a href="#">Front End Design</a> <ul> <li><a href="#">HTML</a> </li> <li><a href="#">CSS</a> <ul> <li><a href="#">Resets</a> </li> <li><a href="#">Grids</a> </li> <li><a href="#">Frameworks</a> <ul> <li><a href="#">Bootstrap</a> </li> <li><a href="#">Foundation</a> </li> <li><a href="#">Sass</a> </li> <li><a href="#">Less</a> <ul> <li><a href="#">Bootstrap</a> </li> <li><a href="#">Foundation</a> </li> <li><a href="#">Sass</a> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">JavaScript</a> <ul> <li><a href="#">Ajax</a> </li> <li><a href="#">jQuery</a> </li> </ul> </li> </ul> </li> <li><a href="#">WordPress Development</a> <ul> <li><a href="#">Custom Post Types</a> <ul> <li><a href="#">subPortfolios</a> </li> <li><a href="#">subTestimonials</a> </li> <li><a href="#">subPortfolios</a> </li> <li><a href="#">subTestimonials</a> </li> </ul> </li> <li><a href="#">Themes</a> </li> <li><a href="#">Plugins</a> </li> <li><a href="#">Themes</a> </li> <li><a href="#">Plugins</a> </li> <li><a href="#">Themes</a> </li> <li><a href="#">Plugins</a> </li> <li><a href="#">Options</a> </li> <li><a href="#">Options</a> </li> <li><a href="#">Themes</a> </li> <li><a href="#">Plugins</a> </li> <li><a href="#">Options</a> </li> <li><a href="#">Options</a> </li> </ul> </li> <li><a href="#">About Us</a> </li> </ul>

And tried to place scroller like this by additon of css:

li:hover > ul {
  display: block;
  position: absolute;
    max-height:250px;
  overflow-y:auto;
}

The result:

 /*Set the parent <li>'s CSS position property to 'relative'.*/ ul { list-style: none; padding: 0; margin: 0; background: #ce4040; border:1px solid #e08d8d; } ul>li{ border-left:1px solid #e08d8d; } ul li { display: block; position: relative; float: left; background: #ce4040; border-bottom:1px solid #e08d8d; } /*The CSS to hide the sub menus. */ li ul { display: none; } ul li a { display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff; } ul li a:hover { background: #ce4040; } /*Displays the dropdown menu on hover.*/ li:hover > ul { display: block; position: absolute; max-height:250px; overflow-y:auto; } li:hover li { float: none; } li:hover a { background: #ce4040; } li:hover li a:hover { background: #962e2e; color:#fff;} .main-navigation li ul li { border-top: 0; } /*Displays second level dropdown menus to the right of the first level dropdown menu.*/ ul ul ul { z-index: 9999; } /*Simple clearfix.*/ ul:before, ul:after { content: " "; /* 1 */ display: table; /* 2 */ } ul:after { clear: both; }

 <ul class="main-navigation"> <li><a href="#">Home</a></li> <li><a href="#">Front End Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a> <ul> <li><a href="#">Resets</a></li> <li><a href="#">Grids</a></li> <li><a href="#">Frameworks</a> <ul> <li><a href="#">Bootstrap</a></li> <li><a href="#">Foundation</a></li> <li><a href="#">Sass</a></li> <li><a href="#">Less</a> <ul> <li><a href="#">Bootstrap</a></li> <li><a href="#">Foundation</a></li> <li><a href="#">Sass</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">JavaScript</a> <ul> <li><a href="#">Ajax</a></li> <li><a href="#">jQuery</a></li> </ul> </li> </ul> </li> <li><a href="#">WordPress Development</a> <ul> <li><a href="#">Custom Post Types</a> <ul> <li><a href="#">subPortfolios</a></li> <li><a href="#">subTestimonials</a></li> <li><a href="#">subPortfolios</a></li> <li><a href="#">subTestimonials</a></li> </ul> </li> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Options</a></li> <li><a href="#">Options</a></li> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Options</a></li> <li><a href="#">Options</a></li> </ul> </li> <li><a href="#">About Us</a></li> </ul>

By placing scroller, the second and third level dropdown menu isnot showing. How can I placescroller without not interrupting the normal functionality of the pure multidowndown css? Any suggestions, tutorials and solutions are highly welcomed as long it leads to solution.

Answer 1

Please change your css

ul ul ul {
  left: 100%;
  top: 0;
}

to

ul ul ul {
  z-index: 9999;
}

I hope it will help you..