I'm trying to create a horizontal scroll menu that also has popup submenus, and I'm struggling with some problems.
I found a similar topic here , but when I try to use the suggested position setting answer: relative; on the parent element of an absolutely positioned element (in this case a pop-up menu), then I run into overflow problems.
Here is a fiddle so you can see what I came across and maybe give some feedback. Firefox works fine as it is, but IE and Chrome have problems with the position of the Four pop-up menu, and then when scrolling to the right.
Please note that when working on yellow fields, a pop-up menu is displayed directly above this element, but when scrolling to the right and when starting over elements, the pop-up menu no longer aligns properly. I tried to set the position of the main <ul> to "relative", but when launching problems with a pop-up window (even after setting the "bottom" to something other than 100px).
HTML
<div class="modal"> <div class="modal-container"> <div class="modal-outer"> <div class="modal-inner"> <div class="project_navigation"> <ul> <li><a href="#">One</a> <ul> <li><a href="#">One A</a></li> <li><a href="#">One B</a></li> <li><a href="#">One C</a></li> <li><a href="#">One D</a></li> </ul> </li> <li><a href="#">Two</a> <ul> <li><a href="#">Two A</a></li> <li><a href="#">Two B</a></li> <li><a href="#">Two C</a></li> <li><a href="#">Two D</a></li> </ul> </li> <li><a href="#">Three</a> <ul> <li><a href="#">Three A</a></li> <li><a href="#">Three B</a></li> <li><a href="#">Three C</a></li> <li><a href="#">Three D</a></li> </ul> </li> <li><a href="#">Four</a> <ul> <li><a href="#">Four A</a></li> <li><a href="#">Four B</a></li> <li><a href="#">Four C</a></li> <li><a href="#">Four D</a></li> </ul> </li> <li><a href="#">Five</a> <ul> <li><a href="#">Five A</a></li> <li><a href="#">Five B</a></li> <li><a href="#">Five C</a></li> <li><a href="#">Five D</a></li> </ul> </li> <li><a href="#">Six</a> <ul> <li><a href="#">Six A</a></li> <li><a href="#">Six B</a></li> <li><a href="#">Six C</a></li> <li><a href="#">Six D</a></li> </ul> </li> <li><a href="#">Seven</a> <ul> <li><a href="#">Seven A</a></li> <li><a href="#">Seven B</a></li> <li><a href="#">Seven C</a></li> <li><a href="#">Seven D</a></li> </ul> </li> <li><a href="#">Eight</a> <ul> <li><a href="#">Eight A</a></li> <li><a href="#">Eight B</a></li> <li><a href="#">Eight C</a></li> <li><a href="#">Eight D</a></li> </ul> </li> <li><a href="#">Nine</a> <ul> <li><a href="#">Nine A</a></li> <li><a href="#">Nine B</a></li> <li><a href="#">Nine C</a></li> <li><a href="#">Nine D</a></li> </ul> </li> <li><a href="#">Ten</a> <ul> <li><a href="#">Ten A</a></li> <li><a href="#">Ten B</a></li> <li><a href="#">Ten C</a></li> <li><a href="#">Ten D</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div>
CSS
.modal { width: 100%; height: 100%; background-position: 50% 50%; border: 0; border-radius: 0; box-shadow: none; left: 0; top: 0; position: absolute; margin-left: 0px; background-repeat: no-repeat; color: #fff; background: #4c3416; background: rgba(76, 52, 22, 0.65); text-align: left; opacity: 1; z-index: 1050; } .modal-container { margin-left: 0; left: auto; height: 125px; position: fixed; top: auto; bottom: 0; width: 100%; background: #4c3416; border-radius: 0; right: auto; color: #4c3416; min-height: initial; } .modal-outer { padding: 5px; min-height: initial; background-color: blue; } .modal-inner { width: 300px; margin: 0 auto; background-color: lightblue; } .project_navigation { overflow-x: auto; white-space: nowrap; background-color: white list-style: none; } .project_navigation > ul > li { display: inline-block; vertical-align: top; height: 50px; width: 50px; padding: 5px; margin: 5px; background-color: yellow; } .project_navigation > ul > li > ul { display: none; list-style: none; } .project_navigation > ul > li:hover > ul { display: block; position: absolute; bottom: 100px; left: auto; width: 125px; height: auto; background-color: #00ff99; }
source share